diff --git a/cli/templates.mjs b/cli/templates.mjs
index 88ccc34411..bf97ec62f5 100644
--- a/cli/templates.mjs
+++ b/cli/templates.mjs
@@ -62,7 +62,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName}
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot />
   </Primitive>
 </template>
@@ -105,7 +105,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName}
 </script>
 
 <template>
-  <${upperName}Root v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })" />
+  <${upperName}Root v-bind="rootProps" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" />
 </template>
 `
   }
diff --git a/src/runtime/components/Accordion.vue b/src/runtime/components/Accordion.vue
index 70a6f0c9ef..09859be1a6 100644
--- a/src/runtime/components/Accordion.vue
+++ b/src/runtime/components/Accordion.vue
@@ -93,34 +93,35 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.accordion ||
 </script>
 
 <template>
-  <AccordionRoot v-bind="rootProps" :type="type" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <AccordionRoot v-bind="rootProps" :type="type" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <AccordionItem
       v-for="(item, index) in props.items"
       v-slot="{ open }"
       :key="index"
       :value="item.value || String(index)"
       :disabled="item.disabled"
+      data-slot="item"
       :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
     >
-      <AccordionHeader as="div" :class="ui.header({ class: [props.ui?.header, item.ui?.header] })">
-        <AccordionTrigger :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger], disabled: item.disabled })">
+      <AccordionHeader as="div" data-slot="header" :class="ui.header({ class: [props.ui?.header, item.ui?.header] })">
+        <AccordionTrigger data-slot="trigger" :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger], disabled: item.disabled })">
           <slot name="leading" :item="item" :index="index" :open="open" :ui="ui">
-            <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item?.ui?.leadingIcon] })" />
+            <UIcon v-if="item.icon" :name="item.icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item?.ui?.leadingIcon] })" />
           </slot>
 
-          <span v-if="get(item, props.labelKey as string) || !!slots.default" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
+          <span v-if="get(item, props.labelKey as string) || !!slots.default" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
             <slot :item="item" :index="index" :open="open">{{ get(item, props.labelKey as string) }}</slot>
           </span>
 
           <slot name="trailing" :item="item" :index="index" :open="open" :ui="ui">
-            <UIcon :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.trailingIcon({ class: [props.ui?.trailingIcon, item.ui?.trailingIcon] })" />
+            <UIcon :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" data-slot="trailingIcon" :class="ui.trailingIcon({ class: [props.ui?.trailingIcon, item.ui?.trailingIcon] })" />
           </slot>
         </AccordionTrigger>
       </AccordionHeader>
 
-      <AccordionContent v-if="item.content || !!slots.content || (item.slot && !!slots[item.slot as keyof AccordionSlots<T>]) || !!slots.body || (item.slot && !!slots[`${item.slot}-body` as keyof AccordionSlots<T>])" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
+      <AccordionContent v-if="item.content || !!slots.content || (item.slot && !!slots[item.slot as keyof AccordionSlots<T>]) || !!slots.body || (item.slot && !!slots[`${item.slot}-body` as keyof AccordionSlots<T>])" data-slot="content" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
         <slot :name="((item.slot || 'content') as keyof AccordionSlots<T>)" :item="(item as Extract<T, { slot: string; }>)" :index="index" :open="open" :ui="ui">
-          <div :class="ui.body({ class: [props.ui?.body, item.ui?.body] })">
+          <div data-slot="body" :class="ui.body({ class: [props.ui?.body, item.ui?.body] })">
             <slot :name="((item.slot ? `${item.slot}-body`: 'body') as keyof AccordionSlots<T>)" :item="(item as Extract<T, { slot: string; }>)" :index="index" :open="open" :ui="ui">
               {{ item.content }}
             </slot>
diff --git a/src/runtime/components/Alert.vue b/src/runtime/components/Alert.vue
index 32fbb51fc6..3d113fe2bb 100644
--- a/src/runtime/components/Alert.vue
+++ b/src/runtime/components/Alert.vue
@@ -97,32 +97,32 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.alert || {})
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot name="leading" :ui="ui">
-      <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 })" />
+      <UAvatar v-if="avatar" :size="((props.ui?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+      <UIcon v-else-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
     </slot>
 
-    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <div v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+    <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
         <slot name="title">
           {{ title }}
         </slot>
       </div>
-      <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+      <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
         <slot name="description">
           {{ description }}
         </slot>
       </div>
 
-      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" :class="ui.actions({ class: props.ui?.actions })">
+      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
         <slot name="actions">
           <UButton v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
         </slot>
       </div>
     </div>
 
-    <div v-if="(orientation === 'horizontal' && (actions?.length || !!slots.actions)) || close" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })">
+    <div v-if="(orientation === 'horizontal' && (actions?.length || !!slots.actions)) || close" data-slot="actions" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })">
       <template v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions)">
         <slot name="actions">
           <UButton v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
@@ -137,6 +137,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.alert || {})
           variant="link"
           :aria-label="t('alert.close')"
           v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
+          data-slot="close"
           :class="ui.close({ class: props.ui?.close })"
           @click="emits('update:open', false)"
         />
diff --git a/src/runtime/components/AuthForm.vue b/src/runtime/components/AuthForm.vue
index 7274cb4fc6..c56b884fdb 100644
--- a/src/runtime/components/AuthForm.vue
+++ b/src/runtime/components/AuthForm.vue
@@ -186,22 +186,22 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-if="(icon || !!slots.leading) || (title || !!slots.title) || (description || !!slots.description) || !!slots.header" :class="ui.header({ class: props.ui?.header })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="(icon || !!slots.leading) || (title || !!slots.title) || (description || !!slots.description) || !!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header">
-        <div v-if="icon || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+        <div v-if="icon || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
           <slot name="leading" :ui="ui">
-            <UIcon v-if="icon" :name="icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+            <UIcon v-if="icon" :name="icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
           </slot>
         </div>
 
-        <div v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+        <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
             {{ title }}
           </slot>
         </div>
 
-        <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+        <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
           <slot name="description">
             {{ description }}
           </slot>
@@ -209,8 +209,8 @@ defineExpose({
       </slot>
     </div>
 
-    <div :class="ui.body({ class: props.ui?.body })">
-      <div v-if="providers?.length || !!slots.providers" :class="ui.providers({ class: props.ui?.providers })">
+    <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
+      <div v-if="providers?.length || !!slots.providers" data-slot="providers" :class="ui.providers({ class: props.ui?.providers })">
         <slot name="providers">
           <UButton
             v-for="(provider, index) in providers"
@@ -226,6 +226,7 @@ defineExpose({
       <USeparator
         v-if="providers?.length && fields?.length"
         v-bind="typeof separator === 'object' ? separator : { label: separator }"
+        data-slot="separator"
         :class="ui.separator({ class: props.ui?.separator })"
       />
 
@@ -238,6 +239,7 @@ defineExpose({
         :validate-on="validateOn"
         :disabled="disabled"
         :loading-auto="loadingAuto"
+        data-slot="form"
         :class="ui.form({ class: props.ui?.form })"
         v-bind="$attrs"
         @submit="onSubmit"
@@ -251,12 +253,14 @@ defineExpose({
             <UCheckbox
               v-if="field.type === 'checkbox'"
               v-model="state[field.name]"
+              data-slot="checkbox"
               :class="ui.checkbox({ class: props.ui?.checkbox })"
               v-bind="(omitFieldProps(field))"
             />
             <USelectMenu
               v-else-if="field.type === 'select'"
               v-model="state[field.name]"
+              data-slot="select"
               :class="ui.select({ class: props.ui?.select })"
               v-bind="(omitFieldProps(field) as AuthFormSelectField)"
             />
@@ -264,6 +268,7 @@ defineExpose({
               v-else-if="field.type === 'otp'"
               :id="field.name"
               v-model="state[field.name]"
+              data-slot="otp"
               :class="ui.otp({ class: props.ui?.otp })"
               v-bind="(Object.assign({}, omitFieldProps(field), typeof (field as AuthFormOtpField).otp === 'object' ? (field as AuthFormOtpField).otp : {}) as any)"
               otp
@@ -272,6 +277,7 @@ defineExpose({
               v-else-if="field.type === 'password'"
               ref="passwordRef"
               v-model="state[field.name]"
+              data-slot="password"
               :class="ui.password({ class: props.ui?.password })"
               v-bind="(omitFieldProps(field) as AuthFormInputField<'password'>)"
               :type="passwordVisibility ? 'text' : 'password'"
@@ -292,6 +298,7 @@ defineExpose({
             <UInput
               v-else
               v-model="state[field.name]"
+              data-slot="input"
               :class="ui.input({ class: props.ui?.input })"
               v-bind="(omitFieldProps(field) as AuthFormInputField)"
             />
@@ -329,7 +336,7 @@ defineExpose({
       </UForm>
     </div>
 
-    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>
diff --git a/src/runtime/components/Avatar.vue b/src/runtime/components/Avatar.vue
index e75eb6726f..2a0a94f938 100644
--- a/src/runtime/components/Avatar.vue
+++ b/src/runtime/components/Avatar.vue
@@ -98,6 +98,7 @@ function onError() {
     :is="props.chip ? UChip : Primitive"
     :as="as.root"
     v-bind="props.chip ? (typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true }) : {}"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="props.style"
   >
@@ -109,14 +110,15 @@ function onError() {
       :width="sizePx"
       :height="sizePx"
       v-bind="$attrs"
+      data-slot="image"
       :class="ui.image({ class: props.ui?.image })"
       @error="onError"
     />
 
     <Slot v-else v-bind="$attrs">
       <slot>
-        <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
-        <span v-else :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback || '&nbsp;' }}</span>
+        <UIcon v-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
+        <span v-else data-slot="fallback" :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback || '&nbsp;' }}</span>
       </slot>
     </Slot>
   </component>
diff --git a/src/runtime/components/AvatarGroup.vue b/src/runtime/components/AvatarGroup.vue
index 722d5519ae..f55d355c60 100644
--- a/src/runtime/components/AvatarGroup.vue
+++ b/src/runtime/components/AvatarGroup.vue
@@ -93,8 +93,8 @@ provide(avatarGroupInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <UAvatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="ui.base({ class: props.ui?.base })" />
-    <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" :class="ui.base({ class: props.ui?.base })" />
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <UAvatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" data-slot="base" :class="ui.base({ class: props.ui?.base })" />
+    <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" data-slot="base" :class="ui.base({ class: props.ui?.base })" />
   </Primitive>
 </template>
diff --git a/src/runtime/components/Badge.vue b/src/runtime/components/Badge.vue
index 65f2148627..b7a92099c2 100644
--- a/src/runtime/components/Badge.vue
+++ b/src/runtime/components/Badge.vue
@@ -68,20 +68,20 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.badge || {})
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.base({ class: [props.ui?.base, props.class] })">
+  <Primitive :as="as" data-slot="base" :class="ui.base({ class: [props.ui?.base, props.class] })">
     <slot name="leading" :ui="ui">
-      <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 })" />
+      <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+      <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
     </slot>
 
     <slot :ui="ui">
-      <span v-if="label !== undefined && label !== null" :class="ui.label({ class: props.ui?.label })">
+      <span v-if="label !== undefined && label !== null" data-slot="label" :class="ui.label({ class: props.ui?.label })">
         {{ label }}
       </span>
     </slot>
 
     <slot name="trailing" :ui="ui">
-      <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+      <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
     </slot>
   </Primitive>
 </template>
diff --git a/src/runtime/components/Banner.vue b/src/runtime/components/Banner.vue
index 6b68d05756..fbb05a7add 100644
--- a/src/runtime/components/Banner.vue
+++ b/src/runtime/components/Banner.vue
@@ -119,7 +119,7 @@ function onClose() {
 </script>
 
 <template>
-  <Primitive :as="as" class="banner" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" class="banner" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <ULink
       v-if="to"
       :aria-label="title"
@@ -131,28 +131,28 @@ function onClose() {
       <span class="absolute inset-0 " aria-hidden="true" />
     </ULink>
 
-    <UContainer :class="ui.container({ class: props.ui?.container })">
-      <div :class="ui.left({ class: props.ui?.left })" />
+    <UContainer data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div data-slot="left" :class="ui.left({ class: props.ui?.left })" />
 
-      <div :class="ui.center({ class: props.ui?.center })">
+      <div data-slot="center" :class="ui.center({ class: props.ui?.center })">
         <slot name="leading" :ui="ui">
-          <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
+          <UIcon v-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
         </slot>
 
-        <div v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+        <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
             {{ title }}
           </slot>
         </div>
 
-        <div v-if="actions?.length || !!slots.actions" :class="ui.actions({ class: props.ui?.actions })">
+        <div v-if="actions?.length || !!slots.actions" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
           <slot name="actions">
             <UButton v-for="(action, index) in actions" :key="index" color="neutral" size="xs" v-bind="action" />
           </slot>
         </div>
       </div>
 
-      <div :class="ui.right({ class: props.ui?.right })">
+      <div data-slot="right" :class="ui.right({ class: props.ui?.right })">
         <slot name="close" :ui="ui">
           <UButton
             v-if="close"
@@ -162,6 +162,7 @@ function onClose() {
             variant="ghost"
             :aria-label="t('banner.close')"
             v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
+            data-slot="close"
             :class="ui.close({ class: props.ui?.close })"
             @click="onClose"
           />
diff --git a/src/runtime/components/BlogPost.vue b/src/runtime/components/BlogPost.vue
index 5d5c50a1e4..4009c16a33 100644
--- a/src/runtime/components/BlogPost.vue
+++ b/src/runtime/components/BlogPost.vue
@@ -115,18 +115,19 @@ const ariaLabel = computed(() => {
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
-    <div v-if="image || !!slots.header" :class="ui.header({ class: props.ui?.header })">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
+    <div v-if="image || !!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header" :ui="ui">
         <component
           :is="ImageComponent"
           v-bind="typeof image === 'string' ? { src: image, alt: title } : { alt: title, ...image }"
+          data-slot="image"
           :class="ui.image({ class: props.ui?.image, to: !!to })"
         />
       </slot>
     </div>
 
-    <div :class="ui.body({ class: props.ui?.body })">
+    <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
       <ULink
         v-if="to"
         :aria-label="ariaLabel"
@@ -139,31 +140,38 @@ const ariaLabel = computed(() => {
       </ULink>
 
       <slot name="body">
-        <div v-if="(date || !!slots.date) || (badge || !!slots.badge)" :class="ui.meta({ class: props.ui?.meta })">
+        <div v-if="(date || !!slots.date) || (badge || !!slots.badge)" data-slot="meta" :class="ui.meta({ class: props.ui?.meta })">
           <slot name="badge">
-            <UBadge v-if="badge" color="neutral" variant="subtle" v-bind="typeof badge === 'string' ? { label: badge } : badge" :class="ui.badge({ class: props.ui?.badge })" />
+            <UBadge
+              v-if="badge"
+              color="neutral"
+              variant="subtle"
+              v-bind="typeof badge === 'string' ? { label: badge } : badge"
+              data-slot="badge"
+              :class="ui.badge({ class: props.ui?.badge })"
+            />
           </slot>
 
-          <time v-if="date || !!slots.date" :datetime="datetime" :class="ui.date({ class: props.ui?.date })">
+          <time v-if="date || !!slots.date" :datetime="datetime" data-slot="date" :class="ui.date({ class: props.ui?.date })">
             <slot name="date">
               {{ date }}
             </slot>
           </time>
         </div>
 
-        <h2 v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+        <h2 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
             {{ title }}
           </slot>
         </h2>
 
-        <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+        <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
           <slot name="description">
             {{ description }}
           </slot>
         </div>
 
-        <div v-if="authors?.length || !!slots.authors" :class="ui.authors({ class: props.ui?.authors })">
+        <div v-if="authors?.length || !!slots.authors" data-slot="authors" :class="ui.authors({ class: props.ui?.authors })">
           <slot name="authors" :ui="ui">
             <template v-if="authors?.length">
               <UAvatarGroup v-if="authors.length > 1">
@@ -172,6 +180,7 @@ const ariaLabel = computed(() => {
                   :key="index"
                   :to="author.to"
                   :target="author.target"
+                  data-slot="avatar"
                   :class="ui.avatar({ class: props.ui?.avatar, to: !!author.to })"
                   raw
                 >
@@ -185,7 +194,7 @@ const ariaLabel = computed(() => {
       </slot>
     </div>
 
-    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>
diff --git a/src/runtime/components/Breadcrumb.vue b/src/runtime/components/Breadcrumb.vue
index aa275dc3c7..433d0fa5bd 100644
--- a/src/runtime/components/Breadcrumb.vue
+++ b/src/runtime/components/Breadcrumb.vue
@@ -86,19 +86,19 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.breadcrumb |
 </script>
 
 <template>
-  <Primitive :as="as" aria-label="breadcrumb" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <ol :class="ui.list({ class: props.ui?.list })">
+  <Primitive :as="as" aria-label="breadcrumb" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <ol data-slot="list" :class="ui.list({ class: props.ui?.list })">
       <template v-for="(item, index) in items" :key="index">
-        <li :class="ui.item({ class: [props.ui?.item, item.ui?.item] })">
+        <li data-slot="item" :class="ui.item({ class: [props.ui?.item, item.ui?.item] })">
           <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-            <ULinkBase v-bind="slotProps" as="span" :aria-current="(item.active ?? active) && (index === items!.length - 1) ? 'page' : undefined" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: item.active ?? (index === items!.length - 1), disabled: !!item.disabled, to: !!item.to })">
+            <ULinkBase v-bind="slotProps" as="span" :aria-current="(item.active ?? active) && (index === items!.length - 1) ? 'page' : undefined" data-slot="link" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: item.active ?? (index === items!.length - 1), disabled: !!item.disabled, to: !!item.to })">
               <slot :name="((item.slot || 'item') as keyof BreadcrumbSlots<T>)" :item="(item as Extract<T, { slot: string; }>)" :active="item.active ?? (index === items!.length - 1)" :index="index" :ui="ui">
                 <slot :name="((item.slot ? `${item.slot}-leading`: 'item-leading') as keyof BreadcrumbSlots<T>)" :item="(item as Extract<T, { slot: string; }>)" :active="item.active ?? (index === items!.length - 1)" :index="index" :ui="ui">
-                  <UIcon v-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active: item.active ?? (index === items!.length - 1) })" />
-                  <UAvatar v-else-if="item.avatar" :size="((props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active: item.active ?? (index === items!.length - 1) })" />
+                  <UIcon v-if="item.icon" :name="item.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active: item.active ?? (index === items!.length - 1) })" />
+                  <UAvatar v-else-if="item.avatar" :size="((props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="linkLeadingAvatar" :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active: item.active ?? (index === items!.length - 1) })" />
                 </slot>
 
-                <span v-if="get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label`: 'item-label') as keyof BreadcrumbSlots<T>]" :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })">
+                <span v-if="get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label`: 'item-label') as keyof BreadcrumbSlots<T>]" data-slot="linkLabel" :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })">
                   <slot :name="((item.slot ? `${item.slot}-label`: 'item-label') as keyof DynamicSlots<T, 'label'>)" :item="(item as Extract<T, { slot: string; }>)" :active="item.active ?? (index === items!.length - 1)" :index="index">
                     {{ get(item, props.labelKey as string) }}
                   </slot>
@@ -110,9 +110,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.breadcrumb |
           </ULink>
         </li>
 
-        <li v-if="index < items!.length - 1" role="presentation" aria-hidden="true" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })">
+        <li v-if="index < items!.length - 1" role="presentation" aria-hidden="true" data-slot="separator" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })">
           <slot name="separator" :ui="ui">
-            <UIcon :name="separatorIcon" :class="ui.separatorIcon({ class: [props.ui?.separatorIcon, item.ui?.separatorIcon] })" />
+            <UIcon :name="separatorIcon" data-slot="separatorIcon" :class="ui.separatorIcon({ class: [props.ui?.separatorIcon, item.ui?.separatorIcon] })" />
           </slot>
         </li>
       </template>
diff --git a/src/runtime/components/Button.vue b/src/runtime/components/Button.vue
index c79fb7d4d2..defb42f768 100644
--- a/src/runtime/components/Button.vue
+++ b/src/runtime/components/Button.vue
@@ -124,6 +124,7 @@ const ui = computed(() => tv({
   >
     <ULinkBase
       v-bind="slotProps"
+      data-slot="base"
       :class="ui.base({
         class: [props.ui?.base, props.class],
         active,
@@ -133,18 +134,18 @@ const ui = computed(() => tv({
       @click="onClickWrapper"
     >
       <slot name="leading" :ui="ui">
-        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon, active })" />
-        <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar, active })" />
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon, active })" />
+        <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar, active })" />
       </slot>
 
       <slot :ui="ui">
-        <span v-if="label !== undefined && label !== null" :class="ui.label({ class: props.ui?.label, active })">
+        <span v-if="label !== undefined && label !== null" data-slot="label" :class="ui.label({ class: props.ui?.label, active })">
           {{ label }}
         </span>
       </slot>
 
       <slot name="trailing" :ui="ui">
-        <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon, active })" />
+        <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon, active })" />
       </slot>
     </ULinkBase>
   </ULink>
diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index 26f880b584..171de5f1c8 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -160,16 +160,17 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
     v-bind="rootProps"
     :model-value="(modelValue as DateValue | DateValue[])"
     :default-value="(defaultValue as DateValue)"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
   >
-    <Calendar.Header :class="ui.header({ class: props.ui?.header })">
+    <Calendar.Header data-slot="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>
         <UButton :icon="prevYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevYear" />
       </Calendar.Prev>
       <Calendar.Prev v-if="props.monthControls" :aria-label="t('calendar.prevMonth')" as-child>
         <UButton :icon="prevMonthIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevMonth" />
       </Calendar.Prev>
-      <Calendar.Heading v-slot="{ headingValue }" :class="ui.heading({ class: props.ui?.heading })">
+      <Calendar.Heading v-slot="{ headingValue }" data-slot="heading" :class="ui.heading({ class: props.ui?.heading })">
         <slot name="heading" :value="headingValue">
           {{ headingValue }}
         </slot>
@@ -181,17 +182,19 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
         <UButton :icon="nextYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.nextYear" />
       </Calendar.Next>
     </Calendar.Header>
-    <div :class="ui.body({ class: props.ui?.body })">
+    <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
       <Calendar.Grid
         v-for="month in grid"
         :key="month.value.toString()"
+        data-slot="grid"
         :class="ui.grid({ class: props.ui?.grid })"
       >
         <Calendar.GridHead>
-          <Calendar.GridRow :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })">
+          <Calendar.GridRow data-slot="gridWeekDaysRow" :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })">
             <Calendar.HeadCell
               v-for="day in weekDays"
               :key="day"
+              data-slot="headCell"
               :class="ui.headCell({ class: props.ui?.headCell })"
             >
               <slot name="week-day" :day="day">
@@ -200,21 +203,24 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
             </Calendar.HeadCell>
           </Calendar.GridRow>
         </Calendar.GridHead>
-        <Calendar.GridBody :class="ui.gridBody({ class: props.ui?.gridBody })">
+        <Calendar.GridBody data-slot="gridBody" :class="ui.gridBody({ class: props.ui?.gridBody })">
           <Calendar.GridRow
             v-for="(weekDates, index) in month.rows"
             :key="`weekDate-${index}`"
+            data-slot="gridRow"
             :class="ui.gridRow({ class: props.ui?.gridRow })"
           >
             <Calendar.Cell
               v-for="weekDate in weekDates"
               :key="weekDate.toString()"
               :date="weekDate"
+              data-slot="cell"
               :class="ui.cell({ class: props.ui?.cell })"
             >
               <Calendar.CellTrigger
                 :day="weekDate"
                 :month="month.value"
+                data-slot="cellTrigger"
                 :class="ui.cellTrigger({ class: props.ui?.cellTrigger })"
               >
                 <slot name="day" :day="weekDate">
diff --git a/src/runtime/components/Card.vue b/src/runtime/components/Card.vue
index 2e53d39dcc..7fe8ceb53e 100644
--- a/src/runtime/components/Card.vue
+++ b/src/runtime/components/Card.vue
@@ -43,16 +43,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.card || {})
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-if="!!slots.header" :class="ui.header({ class: props.ui?.header })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header" />
     </div>
 
-    <div v-if="!!slots.default" :class="ui.body({ class: props.ui?.body })">
+    <div v-if="!!slots.default" data-slot="body" :class="ui.body({ class: props.ui?.body })">
       <slot />
     </div>
 
-    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>
diff --git a/src/runtime/components/Carousel.vue b/src/runtime/components/Carousel.vue
index 75191d0031..ae416d53cb 100644
--- a/src/runtime/components/Carousel.vue
+++ b/src/runtime/components/Carousel.vue
@@ -315,15 +315,17 @@ defineExpose({
     aria-roledescription="carousel"
     :data-orientation="orientation"
     tabindex="0"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     @keydown="onKeyDown"
   >
-    <div ref="emblaRef" :class="ui.viewport({ class: props.ui?.viewport })">
-      <div :class="ui.container({ class: props.ui?.container })">
+    <div ref="emblaRef" data-slot="viewport" :class="ui.viewport({ class: props.ui?.viewport })">
+      <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
         <div
           v-for="(item, index) in items"
           :key="index"
           v-bind="dots ? { role: 'tabpanel' } : { 'role': 'group', 'aria-roledescription': 'slide' }"
+          data-slot="item"
           :class="ui.item({ class: [props.ui?.item, isCarouselItem(item) && item.ui?.item, isCarouselItem(item) && item.class] })"
         >
           <slot :item="item" :index="index" />
@@ -331,8 +333,8 @@ defineExpose({
       </div>
     </div>
 
-    <div v-if="arrows || dots" :class="ui.controls({ class: props.ui?.controls })">
-      <div v-if="arrows" :class="ui.arrows({ class: props.ui?.arrows })">
+    <div v-if="arrows || dots" data-slot="controls" :class="ui.controls({ class: props.ui?.controls })">
+      <div v-if="arrows" data-slot="arrows" :class="ui.arrows({ class: props.ui?.arrows })">
         <UButton
           :disabled="!canScrollPrev"
           :icon="prevIcon"
@@ -340,6 +342,7 @@ defineExpose({
           variant="outline"
           :aria-label="t('carousel.prev')"
           v-bind="typeof prev === 'object' ? prev : undefined"
+          data-slot="prev"
           :class="ui.prev({ class: props.ui?.prev })"
           @click="scrollPrev"
         />
@@ -350,18 +353,20 @@ defineExpose({
           variant="outline"
           :aria-label="t('carousel.next')"
           v-bind="typeof next === 'object' ? next : undefined"
+          data-slot="next"
           :class="ui.next({ class: props.ui?.next })"
           @click="scrollNext"
         />
       </div>
 
-      <div v-if="dots" role="tablist" :aria-label="t('carousel.dots')" :class="ui.dots({ class: props.ui?.dots })">
+      <div v-if="dots" role="tablist" :aria-label="t('carousel.dots')" data-slot="dots" :class="ui.dots({ class: props.ui?.dots })">
         <template v-for="(_, index) in scrollSnaps" :key="index">
           <button
             type="button"
             role="tab"
             :aria-label="t('carousel.goto', { slide: index + 1 })"
             :aria-selected="selectedIndex === index"
+            data-slot="dot"
             :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
             :data-state="selectedIndex === index ? 'active' : undefined"
             @click="scrollTo(index)"
diff --git a/src/runtime/components/ChangelogVersion.vue b/src/runtime/components/ChangelogVersion.vue
index c40593915f..969441094d 100644
--- a/src/runtime/components/ChangelogVersion.vue
+++ b/src/runtime/components/ChangelogVersion.vue
@@ -134,36 +134,43 @@ const ariaLabel = computed(() => {
   </DefineLinkTemplate>
 
   <DefineDateTemplate v-slot="{ hidden }">
-    <time v-if="date" :datetime="datetime" :class="ui.date({ class: props.ui?.date, hidden })">
+    <time v-if="date" :datetime="datetime" data-slot="date" :class="ui.date({ class: props.ui?.date, hidden })">
       <slot name="date">
         {{ date }}
       </slot>
     </time>
   </DefineDateTemplate>
 
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
-    <div v-if="!!props.indicator || !!slots.indicator" :class="ui.indicator({ class: props.ui?.indicator })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
+    <div v-if="!!props.indicator || !!slots.indicator" data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
       <slot name="indicator" :ui="ui">
         <ReuseDateTemplate />
 
-        <div :class="ui.dot({ class: props.ui?.dot })">
-          <div :class="ui.dotInner({ class: props.ui?.dotInner })" />
+        <div data-slot="dot" :class="ui.dot({ class: props.ui?.dot })">
+          <div data-slot="dotInner" :class="ui.dotInner({ class: props.ui?.dotInner })" />
         </div>
       </slot>
     </div>
 
-    <div :class="ui.container({ class: props.ui?.container })">
-      <div v-if="!!slots.header || (date || !!slots.date) || (badge || !!slots.badge) || (title || !!slots.title) || (description || !!slots.description) || (image || !!slots.image)" :class="ui.header({ class: props.ui?.header })">
+    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div v-if="!!slots.header || (date || !!slots.date) || (badge || !!slots.badge) || (title || !!slots.title) || (description || !!slots.description) || (image || !!slots.image)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
         <slot name="header">
-          <div v-if="(date || !!slots.date) || (badge || !!slots.badge)" :class="ui.meta({ class: props.ui?.meta, badge: (!!badge || !!slots.badge) || !props.indicator })">
+          <div v-if="(date || !!slots.date) || (badge || !!slots.badge)" data-slot="meta" :class="ui.meta({ class: props.ui?.meta, badge: (!!badge || !!slots.badge) || !props.indicator })">
             <slot name="badge" :ui="ui">
-              <UBadge v-if="badge" color="neutral" variant="solid" v-bind="typeof badge === 'string' ? { label: badge } : badge" :class="ui.badge({ class: props.ui?.badge })" />
+              <UBadge
+                v-if="badge"
+                color="neutral"
+                variant="solid"
+                v-bind="typeof badge === 'string' ? { label: badge } : badge"
+                data-slot="badge"
+                :class="ui.badge({ class: props.ui?.badge })"
+              />
             </slot>
 
             <ReuseDateTemplate :hidden="!!props.indicator" />
           </div>
 
-          <h2 v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+          <h2 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
             <ReuseLinkTemplate />
 
             <slot name="title">
@@ -171,18 +178,19 @@ const ariaLabel = computed(() => {
             </slot>
           </h2>
 
-          <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+          <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
             <slot name="description">
               {{ description }}
             </slot>
           </div>
 
-          <div v-if="image || !!slots.image" :class="ui.imageWrapper({ class: props.ui?.imageWrapper })">
+          <div v-if="image || !!slots.image" data-slot="imageWrapper" :class="ui.imageWrapper({ class: props.ui?.imageWrapper })">
             <slot name="image" :ui="ui">
               <component
                 :is="ImageComponent"
                 v-if="image"
                 v-bind="typeof image === 'string' ? { src: image, alt: title } : { alt: title, ...image }"
+                data-slot="image"
                 :class="ui.image({ class: props.ui?.image, to: !!to })"
               />
             </slot>
@@ -194,9 +202,9 @@ const ariaLabel = computed(() => {
 
       <slot name="body" />
 
-      <div v-if="!!slots.footer || (authors?.length || !!slots.authors) || !!slots.actions" :class="ui.footer({ class: props.ui?.footer, body: !!slots.body })">
+      <div v-if="!!slots.footer || (authors?.length || !!slots.authors) || !!slots.actions" data-slot="footer" :class="ui.footer({ class: props.ui?.footer, body: !!slots.body })">
         <slot name="footer">
-          <div v-if="authors?.length || !!slots.authors" :class="ui.authors({ class: props.ui?.authors })">
+          <div v-if="authors?.length || !!slots.authors" data-slot="authors" :class="ui.authors({ class: props.ui?.authors })">
             <slot name="authors">
               <UUser
                 v-for="(author, index) in authors"
diff --git a/src/runtime/components/ChangelogVersions.vue b/src/runtime/components/ChangelogVersions.vue
index 8ce167e622..98daf284df 100644
--- a/src/runtime/components/ChangelogVersions.vue
+++ b/src/runtime/components/ChangelogVersions.vue
@@ -76,14 +76,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.changelogVer
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-if="!!props.indicator || !!slots.indicator" :class="ui.indicator({ class: props.ui?.indicator })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!props.indicator || !!slots.indicator" data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
       <slot name="indicator">
-        <Motion v-if="!!props.indicatorMotion" :class="ui.beam({ class: props.ui?.beam })" :style="{ height }" />
+        <Motion v-if="!!props.indicatorMotion" data-slot="beam" :class="ui.beam({ class: props.ui?.beam })" :style="{ height }" />
       </slot>
     </div>
 
-    <div v-if="versions?.length || !!slots.default" :class="ui.container({ class: props.ui?.container })">
+    <div v-if="versions?.length || !!slots.default" data-slot="container" :class="ui.container({ class: props.ui?.container })">
       <slot>
         <UChangelogVersion
           v-for="(version, index) in versions"
diff --git a/src/runtime/components/ChatMessage.vue b/src/runtime/components/ChatMessage.vue
index ac9522fc8f..ed74458722 100644
--- a/src/runtime/components/ChatMessage.vue
+++ b/src/runtime/components/ChatMessage.vue
@@ -82,16 +82,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chatMessage
 </script>
 
 <template>
-  <Primitive :as="as" :data-role="role" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.container({ class: props.ui?.container })">
-      <div v-if="icon || avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+  <Primitive :as="as" :data-role="role" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div v-if="icon || avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
         <slot name="leading" :avatar="avatar" :ui="ui">
-          <UIcon v-if="icon" :name="icon" :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 })" />
+          <UIcon v-if="icon" :name="icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+          <UAvatar v-else-if="avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
         </slot>
       </div>
 
-      <div v-if="content || parts.length || !!slots.content" :class="ui.content({ class: props.ui?.content })">
+      <div v-if="content || parts.length || !!slots.content" data-slot="content" :class="ui.content({ class: props.ui?.content })">
         <slot
           :id="id"
           name="content"
@@ -112,7 +112,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chatMessage
         </slot>
       </div>
 
-      <div v-if="actions || !!slots.actions" :class="ui.actions({ class: props.ui?.actions })">
+      <div v-if="actions || !!slots.actions" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
         <slot name="actions" :actions="actions">
           <UTooltip v-for="(action, index) in actions" :key="index" :text="action.label">
             <UButton
diff --git a/src/runtime/components/ChatMessages.vue b/src/runtime/components/ChatMessages.vue
index b4f3fbe014..141f552050 100644
--- a/src/runtime/components/ChatMessages.vue
+++ b/src/runtime/components/ChatMessages.vue
@@ -288,6 +288,7 @@ onMounted(() => {
   <div
     ref="el"
     :data-status="status"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="{ '--last-message-height': `${lastMessageHeight}px` }"
   >
@@ -314,7 +315,7 @@ onMounted(() => {
     >
       <template #content>
         <slot name="indicator" :ui="ui">
-          <div :class="ui.indicator({ class: props.ui?.indicator })">
+          <div data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
             <span />
             <span />
             <span />
@@ -324,7 +325,7 @@ onMounted(() => {
     </UChatMessage>
 
     <Presence :present="showAutoScroll">
-      <div :data-state="showAutoScroll ? 'open' : 'closed'" :class="ui.viewport({ class: props.ui?.viewport })">
+      <div :data-state="showAutoScroll ? 'open' : 'closed'" data-slot="viewport" :class="ui.viewport({ class: props.ui?.viewport })">
         <slot name="viewport" :ui="ui" :on-click="onAutoScrollClick">
           <UButton
             v-if="autoScroll"
@@ -332,6 +333,7 @@ onMounted(() => {
             color="neutral"
             variant="outline"
             v-bind="(typeof autoScroll === 'object' ? autoScroll as Partial<ButtonProps> : {})"
+            data-slot="autoScroll"
             :class="ui.autoScroll({ class: props.ui?.autoScroll })"
             @click="onAutoScrollClick"
           />
diff --git a/src/runtime/components/ChatPalette.vue b/src/runtime/components/ChatPalette.vue
index 8b67cfd85e..7fd34357c6 100644
--- a/src/runtime/components/ChatPalette.vue
+++ b/src/runtime/components/ChatPalette.vue
@@ -37,14 +37,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chatPalette
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.content({ class: props.ui?.content })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="content" :class="ui.content({ class: props.ui?.content })">
       <Slot compact>
         <slot />
       </Slot>
     </div>
 
-    <Slot v-if="!!slots.prompt" :class="ui.prompt({ class: props.ui?.prompt })">
+    <Slot v-if="!!slots.prompt" data-slot="prompt" :class="ui.prompt({ class: props.ui?.prompt })">
       <slot name="prompt" />
     </Slot>
   </Primitive>
diff --git a/src/runtime/components/ChatPrompt.vue b/src/runtime/components/ChatPrompt.vue
index 8f0755e85f..27a27b6109 100644
--- a/src/runtime/components/ChatPrompt.vue
+++ b/src/runtime/components/ChatPrompt.vue
@@ -93,8 +93,8 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" @submit.prevent="submit">
-    <div v-if="!!slots.header" :class="ui.header({ class: props.ui?.header })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @submit.prevent="submit">
+    <div v-if="!!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header" />
     </div>
 
@@ -106,6 +106,7 @@ defineExpose({
       variant="none"
       v-bind="{ ...textareaProps, ...$attrs }"
       :ui="transformUI(omit(ui, ['root', 'body', 'header', 'footer']), props.ui)"
+      data-slot="body"
       :class="ui.body({ class: props.ui?.body })"
       @keydown.enter.exact.prevent="submit"
       @keydown.esc="blur"
@@ -115,7 +116,7 @@ defineExpose({
       </template>
     </UTextarea>
 
-    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>
diff --git a/src/runtime/components/Checkbox.vue b/src/runtime/components/Checkbox.vue
index 6ca8fb0a7a..81036e89e8 100644
--- a/src/runtime/components/Checkbox.vue
+++ b/src/runtime/components/Checkbox.vue
@@ -103,33 +103,34 @@ function onUpdate(value: any) {
 
 <!-- eslint-disable vue/no-template-shadow -->
 <template>
-  <Primitive :as="(!variant || variant === 'list') ? as : Label" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.container({ class: props.ui?.container })">
+  <Primitive :as="(!variant || variant === 'list') ? as : Label" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
       <CheckboxRoot
         :id="id"
         v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
         v-model="modelValue"
         :name="name"
         :disabled="disabled"
+        data-slot="base"
         :class="ui.base({ class: props.ui?.base })"
         @update:model-value="onUpdate"
       >
         <template #default="{ modelValue }">
-          <CheckboxIndicator :class="ui.indicator({ class: props.ui?.indicator })">
-            <UIcon v-if="modelValue === 'indeterminate'" :name="indeterminateIcon || appConfig.ui.icons.minus" :class="ui.icon({ class: props.ui?.icon })" />
-            <UIcon v-else :name="icon || appConfig.ui.icons.check" :class="ui.icon({ class: props.ui?.icon })" />
+          <CheckboxIndicator data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
+            <UIcon v-if="modelValue === 'indeterminate'" :name="indeterminateIcon || appConfig.ui.icons.minus" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
+            <UIcon v-else :name="icon || appConfig.ui.icons.check" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
           </CheckboxIndicator>
         </template>
       </CheckboxRoot>
     </div>
 
-    <div v-if="(label || !!slots.label) || (description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <component :is="(!variant || variant === 'list') ? Label : 'p'" v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
+    <div v-if="(label || !!slots.label) || (description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <component :is="(!variant || variant === 'list') ? Label : 'p'" v-if="label || !!slots.label" :for="id" data-slot="label" :class="ui.label({ class: props.ui?.label })">
         <slot name="label" :label="label">
           {{ label }}
         </slot>
       </component>
-      <p v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+      <p v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
         <slot name="description" :description="description">
           {{ description }}
         </slot>
diff --git a/src/runtime/components/CheckboxGroup.vue b/src/runtime/components/CheckboxGroup.vue
index 3404195688..f7f2e076c7 100644
--- a/src/runtime/components/CheckboxGroup.vue
+++ b/src/runtime/components/CheckboxGroup.vue
@@ -166,11 +166,12 @@ function onUpdate(value: any) {
     v-bind="rootProps"
     :name="name"
     :disabled="disabled"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="onUpdate"
   >
-    <fieldset :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">
-      <legend v-if="legend || !!slots.legend" :class="ui.legend({ class: props.ui?.legend })">
+    <fieldset data-slot="fieldset" :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">
+      <legend v-if="legend || !!slots.legend" data-slot="legend" :class="ui.legend({ class: props.ui?.legend })">
         <slot name="legend">
           {{ legend }}
         </slot>
@@ -185,6 +186,7 @@ function onUpdate(value: any) {
         :name="name"
         :disabled="item.disabled || disabled"
         :ui="{ ...(props.ui ? omit(props.ui, ['root']) : undefined), ...(item.ui || {}) }"
+        data-slot="item"
         :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
       >
         <template v-for="(_, name) in getProxySlots()" #[name]>
diff --git a/src/runtime/components/Chip.vue b/src/runtime/components/Chip.vue
index 742c2ecaf8..b8947c5a63 100644
--- a/src/runtime/components/Chip.vue
+++ b/src/runtime/components/Chip.vue
@@ -74,12 +74,12 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chip || {})
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <Slot v-bind="$attrs">
       <slot />
     </Slot>
 
-    <span v-if="show" :class="ui.base({ class: props.ui?.base })">
+    <span v-if="show" data-slot="base" :class="ui.base({ class: props.ui?.base })">
       <slot name="content">
         {{ text }}
       </slot>
diff --git a/src/runtime/components/Collapsible.vue b/src/runtime/components/Collapsible.vue
index 6bf0703c32..8408928916 100644
--- a/src/runtime/components/Collapsible.vue
+++ b/src/runtime/components/Collapsible.vue
@@ -46,12 +46,12 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.collapsible
 </script>
 
 <template>
-  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <CollapsibleTrigger v-if="!!slots.default" as-child>
       <slot :open="open" />
     </CollapsibleTrigger>
 
-    <CollapsibleContent :class="ui.content({ class: props.ui?.content })">
+    <CollapsibleContent data-slot="content" :class="ui.content({ class: props.ui?.content })">
       <slot name="content" />
     </CollapsibleContent>
   </CollapsibleRoot>
diff --git a/src/runtime/components/ColorPicker.vue b/src/runtime/components/ColorPicker.vue
index be2566511b..8733b6bc96 100644
--- a/src/runtime/components/ColorPicker.vue
+++ b/src/runtime/components/ColorPicker.vue
@@ -263,16 +263,18 @@ const trackThumbStyle = computed(() => ({
 </script>
 
 <template>
-  <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 })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" :data-disabled="disabled ? true : undefined">
+    <div data-slot="picker" :class="ui.picker({ class: props.ui?.picker })">
       <div
         ref="selectorRef"
+        data-slot="selector"
         :class="ui.selector({ class: props.ui?.selector })"
         :style="selectorStyle"
       >
-        <div :class="ui.selectorBackground({ class: props.ui?.selectorBackground })" data-color-picker-background>
+        <div data-slot="selectorBackground" :class="ui.selectorBackground({ class: props.ui?.selectorBackground })" data-color-picker-background>
           <div
             ref="selectorThumbRef"
+            data-slot="selectorThumb"
             :class="ui.selectorThumb({ class: props.ui?.selectorThumb })"
             :style="selectorThumbStyle"
             :data-disabled="disabled ? true : undefined"
@@ -281,11 +283,13 @@ const trackThumbStyle = computed(() => ({
       </div>
       <div
         ref="trackRef"
+        data-slot="track"
         :class="ui.track({ class: props.ui?.track })"
         data-color-picker-track
       >
         <div
           ref="trackThumbRef"
+          data-slot="trackThumb"
           :class="ui.trackThumb({ class: props.ui?.trackThumb })"
           :style="trackThumbStyle"
           :data-disabled="disabled ? true : undefined"
diff --git a/src/runtime/components/CommandPalette.vue b/src/runtime/components/CommandPalette.vue
index 6a9ae362cd..75e652a8af 100644
--- a/src/runtime/components/CommandPalette.vue
+++ b/src/runtime/components/CommandPalette.vue
@@ -438,59 +438,61 @@ function onSelect(e: Event, item: T) {
       @select="onSelect($event, item as T)"
     >
       <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-        <ULinkBase v-bind="slotProps" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], active: active || item.active })">
+        <ULinkBase v-bind="slotProps" data-slot="item" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], active: active || item.active })">
           <slot :name="((item.slot || group?.slot || 'item') as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index" :ui="ui">
             <slot :name="((item.slot ? `${item.slot}-leading` : group?.slot ? `${group.slot}-leading` : `item-leading`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index" :ui="ui">
-              <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], loading: true })" />
-              <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], active: active || item.active })" />
-              <UAvatar v-else-if="item.avatar" :size="((item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active: active || item.active })" />
+              <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], loading: true })" />
+              <UIcon v-else-if="item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], active: active || item.active })" />
+              <UAvatar v-else-if="item.avatar" :size="((item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active: active || item.active })" />
               <UChip
                 v-else-if="item.chip"
                 :size="((item.ui?.itemLeadingChipSize || props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
                 inset
                 standalone
                 v-bind="item.chip"
+                data-slot="itemLeadingChip"
                 :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip], active: active || item.active })"
               />
             </slot>
 
-            <span v-if="(item.prefix || (item.labelHtml || get(item, props.labelKey as string)) || (item.suffixHtml || item.suffix) || !!slots[(item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`) as keyof CommandPaletteSlots<G, T>]) || (get(item, props.descriptionKey as string) || !!slots[(item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`) as keyof CommandPaletteSlots<G, T>])" :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, item.ui?.itemWrapper] })">
-              <span :class="ui.itemLabel({ class: [props.ui?.itemLabel, item.ui?.itemLabel], active: active || item.active })">
+            <span v-if="(item.prefix || (item.labelHtml || get(item, props.labelKey as string)) || (item.suffixHtml || item.suffix) || !!slots[(item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`) as keyof CommandPaletteSlots<G, T>]) || (get(item, props.descriptionKey as string) || !!slots[(item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`) as keyof CommandPaletteSlots<G, T>])" data-slot="itemWrapper" :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, item.ui?.itemWrapper] })">
+              <span data-slot="itemLabel" :class="ui.itemLabel({ class: [props.ui?.itemLabel, item.ui?.itemLabel], active: active || item.active })">
                 <slot :name="((item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index" :ui="ui">
-                  <span v-if="item.prefix" :class="ui.itemLabelPrefix({ class: [props.ui?.itemLabelPrefix, item.ui?.itemLabelPrefix] })">{{ item.prefix }}</span>
+                  <span v-if="item.prefix" data-slot="itemLabelPrefix" :class="ui.itemLabelPrefix({ class: [props.ui?.itemLabelPrefix, item.ui?.itemLabelPrefix] })">{{ item.prefix }}</span>
 
-                  <span v-if="item.labelHtml" :class="ui.itemLabelBase({ class: [props.ui?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })" v-html="item.labelHtml" />
-                  <span v-else :class="ui.itemLabelBase({ class: [props.ui?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })">{{ get(item, props.labelKey as string) }}</span>
+                  <span v-if="item.labelHtml" data-slot="itemLabelBase" :class="ui.itemLabelBase({ class: [props.ui?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })" v-html="item.labelHtml" />
+                  <span v-else data-slot="itemLabelBase" :class="ui.itemLabelBase({ class: [props.ui?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })">{{ get(item, props.labelKey as string) }}</span>
 
-                  <span v-if="item.suffixHtml" :class="ui.itemLabelSuffix({ class: [props.ui?.itemLabelSuffix, item.ui?.itemLabelSuffix], active: active || item.active })" v-html="item.suffixHtml" />
-                  <span v-else-if="item.suffix" :class="ui.itemLabelSuffix({ class: [props.ui?.itemLabelSuffix, item.ui?.itemLabelSuffix], active: active || item.active })">{{ item.suffix }}</span>
+                  <span v-if="item.suffixHtml" data-slot="itemLabelSuffix" :class="ui.itemLabelSuffix({ class: [props.ui?.itemLabelSuffix, item.ui?.itemLabelSuffix], active: active || item.active })" v-html="item.suffixHtml" />
+                  <span v-else-if="item.suffix" data-slot="itemLabelSuffix" :class="ui.itemLabelSuffix({ class: [props.ui?.itemLabelSuffix, item.ui?.itemLabelSuffix], active: active || item.active })">{{ item.suffix }}</span>
                 </slot>
               </span>
 
-              <span v-if="get(item, props.descriptionKey as string)" :class="ui.itemDescription({ class: [props.ui?.itemDescription, item.ui?.itemDescription] })">
+              <span v-if="get(item, props.descriptionKey as string)" data-slot="itemDescription" :class="ui.itemDescription({ class: [props.ui?.itemDescription, item.ui?.itemDescription] })">
                 <slot :name="((item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index" :ui="ui">
                   {{ get(item, props.descriptionKey as string) }}
                 </slot>
               </span>
             </span>
 
-            <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
+            <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
               <slot :name="((item.slot ? `${item.slot}-trailing` : group?.slot ? `${group.slot}-trailing` : `item-trailing`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index" :ui="ui">
                 <UIcon
                   v-if="item.children && item.children.length > 0"
                   :name="childrenIcon || appConfig.ui.icons.chevronRight"
+                  data-slot="itemTrailingIcon"
                   :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })"
                 />
 
-                <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [props.ui?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
+                <span v-else-if="item.kbds?.length" data-slot="itemTrailingKbds" :class="ui.itemTrailingKbds({ class: [props.ui?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
                   <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((item.ui?.itemTrailingKbdsSize || props.ui?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
                 </span>
 
-                <UIcon v-else-if="group?.highlightedIcon" :name="group.highlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: [props.ui?.itemTrailingHighlightedIcon, item.ui?.itemTrailingHighlightedIcon] })" />
+                <UIcon v-else-if="group?.highlightedIcon" :name="group.highlightedIcon" data-slot="itemTrailingHighlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: [props.ui?.itemTrailingHighlightedIcon, item.ui?.itemTrailingHighlightedIcon] })" />
               </slot>
 
               <ListboxItemIndicator v-if="!item.children?.length" as-child>
-                <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
+                <UIcon :name="selectedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
               </ListboxItemIndicator>
             </span>
           </slot>
@@ -499,7 +501,7 @@ function onSelect(e: Event, item: T) {
     </ListboxItem>
   </DefineItemTemplate>
 
-  <ListboxRoot v-bind="{ ...rootProps, ...$attrs }" ref="rootRef" :selection-behavior="selectionBehavior" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <ListboxRoot v-bind="{ ...rootProps, ...$attrs }" ref="rootRef" :selection-behavior="selectionBehavior" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <ListboxFilter v-model="searchTerm" as-child>
       <UInput
         :placeholder="placeholder"
@@ -509,6 +511,7 @@ function onSelect(e: Event, item: T) {
         :loading-icon="loadingIcon"
         :trailing-icon="trailingIcon"
         :icon="icon || appConfig.ui.icons.search"
+        data-slot="input"
         :class="ui.input({ class: props.ui?.input })"
         @keydown.backspace="onBackspace"
       >
@@ -520,6 +523,7 @@ function onSelect(e: Event, item: T) {
               variant="link"
               :aria-label="t('commandPalette.back')"
               v-bind="(typeof back === 'object' ? back as Partial<ButtonProps> : {})"
+              data-slot="back"
               :class="ui.back({ class: props.ui?.back })"
               @click="navigateBack"
             />
@@ -535,6 +539,7 @@ function onSelect(e: Event, item: T) {
               variant="ghost"
               :aria-label="t('commandPalette.close')"
               v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
+              data-slot="close"
               :class="ui.close({ class: props.ui?.close })"
               @click="emits('update:open', false)"
             />
@@ -543,8 +548,8 @@ function onSelect(e: Event, item: T) {
       </UInput>
     </ListboxFilter>
 
-    <ListboxContent :class="ui.content({ class: props.ui?.content })">
-      <div v-if="filteredGroups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+    <ListboxContent data-slot="content" :class="ui.content({ class: props.ui?.content })">
+      <div v-if="filteredGroups?.length" role="presentation" data-slot="viewport" :class="ui.viewport({ class: props.ui?.viewport })">
         <ListboxVirtualizer
           v-if="!!virtualize"
           v-slot="{ option: item, virtualItem }"
@@ -556,8 +561,8 @@ function onSelect(e: Event, item: T) {
         </ListboxVirtualizer>
 
         <template v-else>
-          <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" :class="ui.group({ class: props.ui?.group })">
-            <ListboxGroupLabel v-if="get(group, props.labelKey as string)" :class="ui.label({ class: props.ui?.label })">
+          <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" data-slot="group" :class="ui.group({ class: props.ui?.group })">
+            <ListboxGroupLabel v-if="get(group, props.labelKey as string)" data-slot="label" :class="ui.label({ class: props.ui?.label })">
               {{ get(group, props.labelKey as string) }}
             </ListboxGroupLabel>
 
@@ -572,14 +577,14 @@ function onSelect(e: Event, item: T) {
         </template>
       </div>
 
-      <div v-else :class="ui.empty({ class: props.ui?.empty })">
+      <div v-else data-slot="empty" :class="ui.empty({ class: props.ui?.empty })">
         <slot name="empty" :search-term="searchTerm">
           {{ searchTerm ? t('commandPalette.noMatch', { searchTerm }) : t('commandPalette.noData') }}
         </slot>
       </div>
     </ListboxContent>
 
-    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" :ui="ui" />
     </div>
   </ListboxRoot>
diff --git a/src/runtime/components/ContextMenuContent.vue b/src/runtime/components/ContextMenuContent.vue
index 7b6b37eb85..b15ca57b1e 100644
--- a/src/runtime/components/ContextMenuContent.vue
+++ b/src/runtime/components/ContextMenuContent.vue
@@ -78,59 +78,60 @@ const groups = computed<ContextMenuItem[][]>(() =>
   <DefineItemTemplate v-slot="{ item, active, index }">
     <slot :name="((item.slot || 'item') as keyof ContextMenuSlots<T>)" :item="item" :index="index" :ui="ui">
       <slot :name="((item.slot ? `${item.slot}-leading`: 'item-leading') as keyof ContextMenuSlots<T>)" :item="item" :active="active" :index="index" :ui="ui">
-        <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, loading: true })" />
-        <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, active })" />
-        <UAvatar v-else-if="item.avatar" :size="((item.ui?.itemLeadingAvatarSize || uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
+        <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, loading: true })" />
+        <UIcon v-else-if="item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, active })" />
+        <UAvatar v-else-if="item.avatar" :size="((item.ui?.itemLeadingAvatarSize || uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
       </slot>
 
-      <span v-if="(get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label`: 'item-label') as keyof ContextMenuSlots<T>]) || (get(item, props.descriptionKey as string) || !!slots[(item.slot ? `${item.slot}-description`: 'item-description') as keyof ContextMenuSlots<T>])" :class="ui.itemWrapper({ class: [uiOverride?.itemWrapper, item.ui?.itemWrapper] })">
-        <span :class="ui.itemLabel({ class: [uiOverride?.itemLabel, item.ui?.itemLabel], active })">
+      <span v-if="(get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label`: 'item-label') as keyof ContextMenuSlots<T>]) || (get(item, props.descriptionKey as string) || !!slots[(item.slot ? `${item.slot}-description`: 'item-description') as keyof ContextMenuSlots<T>])" data-slot="itemWrapper" :class="ui.itemWrapper({ class: [uiOverride?.itemWrapper, item.ui?.itemWrapper] })">
+        <span data-slot="itemLabel" :class="ui.itemLabel({ class: [uiOverride?.itemLabel, item.ui?.itemLabel], active })">
           <slot :name="((item.slot ? `${item.slot}-label`: 'item-label') as keyof ContextMenuSlots<T>)" :item="item" :active="active" :index="index">
             {{ get(item, props.labelKey as string) }}
           </slot>
 
-          <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.itemLabelExternalIcon({ class: [uiOverride?.itemLabelExternalIcon, item.ui?.itemLabelExternalIcon], color: item?.color, active })" />
+          <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" data-slot="itemLabelExternalIcon" :class="ui.itemLabelExternalIcon({ class: [uiOverride?.itemLabelExternalIcon, item.ui?.itemLabelExternalIcon], color: item?.color, active })" />
         </span>
 
-        <span v-if="get(item, props.descriptionKey as string)" :class="ui.itemDescription({ class: [uiOverride?.itemDescription, item.ui?.itemDescription] })">
+        <span v-if="get(item, props.descriptionKey as string)" data-slot="itemDescription" :class="ui.itemDescription({ class: [uiOverride?.itemDescription, item.ui?.itemDescription] })">
           <slot :name="((item.slot ? `${item.slot}-description`: 'item-description') as keyof ContextMenuSlots<T>)" :item="item" :active="active" :index="index">
             {{ get(item, props.descriptionKey as string) }}
           </slot>
         </span>
       </span>
 
-      <span :class="ui.itemTrailing({ class: [uiOverride?.itemTrailing, item.ui?.itemTrailing] })">
+      <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [uiOverride?.itemTrailing, item.ui?.itemTrailing] })">
         <slot :name="((item.slot ? `${item.slot}-trailing`: 'item-trailing') as keyof ContextMenuSlots<T>)" :item="item" :active="active" :index="index" :ui="ui">
-          <UIcon v-if="item.children?.length" :name="childrenIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color, active })" />
-          <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
+          <UIcon v-if="item.children?.length" :name="childrenIcon" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color, active })" />
+          <span v-else-if="item.kbds?.length" data-slot="itemTrailingKbds" :class="ui.itemTrailingKbds({ class: [uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
             <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((item.ui?.itemTrailingKbdsSize || uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
           </span>
         </slot>
 
         <ContextMenu.ItemIndicator as-child>
-          <UIcon :name="checkedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color })" />
+          <UIcon :name="checkedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color })" />
         </ContextMenu.ItemIndicator>
       </span>
     </slot>
   </DefineItemTemplate>
 
   <ContextMenu.Portal v-bind="portalProps">
-    <component :is="sub ? ContextMenu.SubContent : ContextMenu.Content" :class="ui.content({ class: [uiOverride?.content, props.class] })" v-bind="contentProps">
+    <component :is="sub ? ContextMenu.SubContent : ContextMenu.Content" data-slot="content" :class="ui.content({ class: [uiOverride?.content, props.class] })" v-bind="contentProps">
       <slot name="content-top" />
 
-      <div role="presentation" :class="ui.viewport({ class: uiOverride?.viewport })">
-        <ContextMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
+      <div role="presentation" data-slot="viewport" :class="ui.viewport({ class: uiOverride?.viewport })">
+        <ContextMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: uiOverride?.group })">
           <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-            <ContextMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
+            <ContextMenu.Label v-if="item.type === 'label'" data-slot="label" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
               <ReuseItemTemplate :item="item" :index="index" />
             </ContextMenu.Label>
-            <ContextMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
+            <ContextMenu.Separator v-else-if="item.type === 'separator'" data-slot="separator" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
             <ContextMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
               <ContextMenu.SubTrigger
                 as="button"
                 type="button"
                 :disabled="item.disabled"
                 :text-value="get(item, props.labelKey as string)"
+                data-slot="item"
                 :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
               >
                 <ReuseItemTemplate :item="item" :index="index" />
@@ -161,6 +162,7 @@ const groups = computed<ContextMenuItem[][]>(() =>
               :model-value="item.checked"
               :disabled="item.disabled"
               :text-value="get(item, props.labelKey as string)"
+              data-slot="item"
               :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
               @update:model-value="item.onUpdateChecked"
               @select="item.onSelect"
@@ -175,7 +177,7 @@ const groups = computed<ContextMenuItem[][]>(() =>
               @select="item.onSelect"
             >
               <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item as Omit<ContextMenuItem, 'type'>)" custom>
-                <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], active, color: item?.color })">
+                <ULinkBase v-bind="slotProps" data-slot="item" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], active, color: item?.color })">
                   <ReuseItemTemplate :item="item" :active="active" :index="index" />
                 </ULinkBase>
               </ULink>
diff --git a/src/runtime/components/DashboardNavbar.vue b/src/runtime/components/DashboardNavbar.vue
index d38a3662f4..26d3cbd333 100644
--- a/src/runtime/components/DashboardNavbar.vue
+++ b/src/runtime/components/DashboardNavbar.vue
@@ -81,21 +81,22 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dashboardNav
         v-if="toggle"
         v-bind="(typeof toggle === 'object' ? toggle as Partial<ButtonProps> : {})"
         :side="toggleSide"
+        data-slot="toggle"
         :class="ui.toggle({ class: props.ui?.toggle, toggleSide })"
       />
     </slot>
   </DefineToggleTemplate>
 
-  <Primitive :as="as" v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.left({ class: props.ui?.left })">
+  <Primitive :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="left" :class="ui.left({ class: props.ui?.left })">
       <ReuseToggleTemplate v-if="toggleSide === 'left'" />
 
       <slot name="left" v-bind="dashboardContext">
         <slot name="leading" v-bind="{ ...dashboardContext, ui }">
-          <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
+          <UIcon v-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
         </slot>
 
-        <h1 :class="ui.title({ class: props.ui?.title })">
+        <h1 data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
             {{ title }}
           </slot>
@@ -105,11 +106,11 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dashboardNav
       </slot>
     </div>
 
-    <div v-if="!!slots.default" :class="ui.center({ class: props.ui?.center })">
+    <div v-if="!!slots.default" data-slot="center" :class="ui.center({ class: props.ui?.center })">
       <slot v-bind="dashboardContext" />
     </div>
 
-    <div :class="ui.right({ class: props.ui?.right })">
+    <div data-slot="right" :class="ui.right({ class: props.ui?.right })">
       <slot name="right" v-bind="dashboardContext" />
 
       <ReuseToggleTemplate v-if="toggleSide === 'right'" />
diff --git a/src/runtime/components/DashboardPanel.vue b/src/runtime/components/DashboardPanel.vue
index 2aed4b7620..2681685698 100644
--- a/src/runtime/components/DashboardPanel.vue
+++ b/src/runtime/components/DashboardPanel.vue
@@ -55,13 +55,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dashboardPan
     ref="el"
     v-bind="$attrs"
     :data-dragging="isDragging"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="[size ? { '--width': `${size}${dashboardContext.unit}` } : undefined]"
   >
     <slot>
       <slot name="header" />
 
-      <div :class="ui.body({ class: props.ui?.body })">
+      <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
         <slot name="body" />
       </div>
 
@@ -73,6 +74,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dashboardPan
     <UDashboardResizeHandle
       v-if="resizable"
       :aria-controls="id"
+      data-slot="handle"
       :class="ui.handle({ class: props.ui?.handle })"
       @mousedown="onMouseDown"
       @touchstart="onTouchStart"
diff --git a/src/runtime/components/DashboardSearch.vue b/src/runtime/components/DashboardSearch.vue
index 49eaa79651..c05b857287 100644
--- a/src/runtime/components/DashboardSearch.vue
+++ b/src/runtime/components/DashboardSearch.vue
@@ -186,6 +186,7 @@ defineExpose({
     :title="title || t('dashboardSearch.title')"
     :description="description || t('dashboardSearch.description')"
     v-bind="modalProps"
+    data-slot="modal"
     :class="ui.modal({ class: [props.ui?.modal, props.class] })"
   >
     <template #content="contentData">
diff --git a/src/runtime/components/DashboardSearchButton.vue b/src/runtime/components/DashboardSearchButton.vue
index 32dc325b52..57794ede8b 100644
--- a/src/runtime/components/DashboardSearchButton.vue
+++ b/src/runtime/components/DashboardSearchButton.vue
@@ -112,7 +112,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dashboardSea
       </template>
 
       <template v-if="!collapsed" #trailing="{ ui: uiProxy }">
-        <div :class="ui.trailing({ class: props.ui?.trailing })">
+        <div data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
           <slot name="trailing" :ui="uiProxy">
             <template v-if="kbds?.length">
               <UKbd v-for="(kbd, index) in kbds" :key="index" variant="subtle" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
diff --git a/src/runtime/components/DashboardSidebar.vue b/src/runtime/components/DashboardSidebar.vue
index f141c55266..6aca904334 100644
--- a/src/runtime/components/DashboardSidebar.vue
+++ b/src/runtime/components/DashboardSidebar.vue
@@ -140,6 +140,7 @@ function toggleOpen() {
         v-if="toggle"
         v-bind="(typeof toggle === 'object' ? toggle as Partial<ButtonProps> : {})"
         :side="toggleSide"
+        data-slot="toggle"
         :class="ui.toggle({ class: props.ui?.toggle, toggleSide })"
       />
     </slot>
@@ -150,6 +151,7 @@ function toggleOpen() {
       <UDashboardResizeHandle
         v-if="resizable"
         :aria-controls="id"
+        data-slot="handle"
         :class="ui.handle({ class: props.ui?.handle })"
         @mousedown="onMouseDown"
         @touchstart="onTouchStart"
@@ -166,18 +168,19 @@ function toggleOpen() {
     v-bind="$attrs"
     :data-collapsed="isCollapsed"
     :data-dragging="isDragging"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="{ '--width': `${size || 0}${dashboardContext.unit}` }"
   >
-    <div v-if="!!slots.header" :class="ui.header({ class: props.ui?.header })">
+    <div v-if="!!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header" :collapsed="isCollapsed" :collapse="collapse" />
     </div>
 
-    <div :class="ui.body({ class: props.ui?.body })">
+    <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
       <slot :collapsed="isCollapsed" :collapse="collapse" />
     </div>
 
-    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" :collapsed="isCollapsed" :collapse="collapse" />
     </div>
   </div>
@@ -196,7 +199,7 @@ function toggleOpen() {
   >
     <template #content="contentData">
       <slot name="content" v-bind="contentData">
-        <div v-if="!!slots.header || mode !== 'drawer'" :class="ui.header({ class: props.ui?.header, menu: true })">
+        <div v-if="!!slots.header || mode !== 'drawer'" data-slot="header" :class="ui.header({ class: props.ui?.header, menu: true })">
           <ReuseToggleTemplate v-if="mode !== 'drawer' && toggleSide === 'left'" />
 
           <slot name="header" />
@@ -204,11 +207,11 @@ function toggleOpen() {
           <ReuseToggleTemplate v-if="mode !== 'drawer' && toggleSide === 'right'" />
         </div>
 
-        <div :class="ui.body({ class: props.ui?.body, menu: true })">
+        <div data-slot="body" :class="ui.body({ class: props.ui?.body, menu: true })">
           <slot />
         </div>
 
-        <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer, menu: true })">
+        <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer, menu: true })">
           <slot name="footer" />
         </div>
       </slot>
diff --git a/src/runtime/components/DashboardToolbar.vue b/src/runtime/components/DashboardToolbar.vue
index 0804190641..77d10ed078 100644
--- a/src/runtime/components/DashboardToolbar.vue
+++ b/src/runtime/components/DashboardToolbar.vue
@@ -38,13 +38,13 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dashboardToo
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot>
-      <div :class="ui.left({ class: [props.ui?.left] })">
+      <div data-slot="left" :class="ui.left({ class: [props.ui?.left] })">
         <slot name="left" />
       </div>
 
-      <div :class="ui.right({ class: [props.ui?.right] })">
+      <div data-slot="right" :class="ui.right({ class: [props.ui?.right] })">
         <slot name="right" />
       </div>
     </slot>
diff --git a/src/runtime/components/Drawer.vue b/src/runtime/components/Drawer.vue
index 65e92871eb..ff1c10b7c6 100644
--- a/src/runtime/components/Drawer.vue
+++ b/src/runtime/components/Drawer.vue
@@ -117,10 +117,10 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}
     </DrawerTrigger>
 
     <DrawerPortal v-bind="portalProps">
-      <DrawerOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
+      <DrawerOverlay v-if="overlay" data-slot="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
 
-      <DrawerContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">
-        <DrawerHandle v-if="handle" :class="ui.handle({ class: props.ui?.handle })" />
+      <DrawerContent data-slot="content" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">
+        <DrawerHandle v-if="handle" data-slot="handle" :class="ui.handle({ class: props.ui?.handle })" />
 
         <VisuallyHidden v-if="!!slots.content && ((title || !!slots.title) || (description || !!slots.description))">
           <DrawerTitle v-if="title || !!slots.title">
@@ -137,16 +137,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}
         </VisuallyHidden>
 
         <slot name="content">
-          <div :class="ui.container({ class: props.ui?.container })">
-            <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description)" :class="ui.header({ class: props.ui?.header })">
+          <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
+            <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
               <slot name="header">
-                <DrawerTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+                <DrawerTitle v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
                   <slot name="title">
                     {{ title }}
                   </slot>
                 </DrawerTitle>
 
-                <DrawerDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+                <DrawerDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
                   <slot name="description">
                     {{ description }}
                   </slot>
@@ -154,11 +154,11 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}
               </slot>
             </div>
 
-            <div v-if="!!slots.body" :class="ui.body({ class: props.ui?.body })">
+            <div v-if="!!slots.body" data-slot="body" :class="ui.body({ class: props.ui?.body })">
               <slot name="body" />
             </div>
 
-            <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+            <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
               <slot name="footer" />
             </div>
           </div>
diff --git a/src/runtime/components/DropdownMenu.vue b/src/runtime/components/DropdownMenu.vue
index a98d507f81..e058f03581 100644
--- a/src/runtime/components/DropdownMenu.vue
+++ b/src/runtime/components/DropdownMenu.vue
@@ -171,7 +171,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dropdownMenu
         <slot :name="(name as keyof DropdownMenuSlots<T>)" v-bind="slotData" />
       </template>
 
-      <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
+      <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
     </UDropdownMenuContent>
   </DropdownMenuRoot>
 </template>
diff --git a/src/runtime/components/DropdownMenuContent.vue b/src/runtime/components/DropdownMenuContent.vue
index 0c3eecdcb8..debd9befbd 100644
--- a/src/runtime/components/DropdownMenuContent.vue
+++ b/src/runtime/components/DropdownMenuContent.vue
@@ -89,59 +89,60 @@ const groups = computed<DropdownMenuItem[][]>(() =>
   <DefineItemTemplate v-slot="{ item, active, index }">
     <slot :name="((item.slot || 'item') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :index="index" :ui="ui">
       <slot :name="((item.slot ? `${item.slot}-leading`: 'item-leading') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :active="active" :index="index" :ui="ui">
-        <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, loading: true })" />
-        <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, active })" />
-        <UAvatar v-else-if="item.avatar" :size="((item.ui?.itemLeadingAvatarSize || uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
+        <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, loading: true })" />
+        <UIcon v-else-if="item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, active })" />
+        <UAvatar v-else-if="item.avatar" :size="((item.ui?.itemLeadingAvatarSize || uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
       </slot>
 
-      <span v-if="(get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label`: 'item-label') as keyof DropdownMenuSlots<T>]) || (get(item, props.descriptionKey as string) || !!slots[(item.slot ? `${item.slot}-description`: 'item-description') as keyof DropdownMenuSlots<T>])" :class="ui.itemWrapper({ class: [uiOverride?.itemWrapper, item.ui?.itemWrapper] })">
-        <span :class="ui.itemLabel({ class: [uiOverride?.itemLabel, item.ui?.itemLabel], active })">
+      <span v-if="(get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label`: 'item-label') as keyof DropdownMenuSlots<T>]) || (get(item, props.descriptionKey as string) || !!slots[(item.slot ? `${item.slot}-description`: 'item-description') as keyof DropdownMenuSlots<T>])" data-slot="itemWrapper" :class="ui.itemWrapper({ class: [uiOverride?.itemWrapper, item.ui?.itemWrapper] })">
+        <span data-slot="itemLabel" :class="ui.itemLabel({ class: [uiOverride?.itemLabel, item.ui?.itemLabel], active })">
           <slot :name="((item.slot ? `${item.slot}-label`: 'item-label') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :active="active" :index="index">
             {{ get(item, props.labelKey as string) }}
           </slot>
 
-          <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.itemLabelExternalIcon({ class: [uiOverride?.itemLabelExternalIcon, item.ui?.itemLabelExternalIcon], color: item?.color, active })" />
+          <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" data-slot="itemLabelExternalIcon" :class="ui.itemLabelExternalIcon({ class: [uiOverride?.itemLabelExternalIcon, item.ui?.itemLabelExternalIcon], color: item?.color, active })" />
         </span>
 
-        <span v-if="get(item, props.descriptionKey as string)" :class="ui.itemDescription({ class: [uiOverride?.itemDescription, item.ui?.itemDescription] })">
+        <span v-if="get(item, props.descriptionKey as string)" data-slot="itemDescription" :class="ui.itemDescription({ class: [uiOverride?.itemDescription, item.ui?.itemDescription] })">
           <slot :name="((item.slot ? `${item.slot}-description`: 'item-description') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :active="active" :index="index">
             {{ get(item, props.descriptionKey as string) }}
           </slot>
         </span>
       </span>
 
-      <span :class="ui.itemTrailing({ class: [uiOverride?.itemTrailing, item.ui?.itemTrailing] })">
+      <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [uiOverride?.itemTrailing, item.ui?.itemTrailing] })">
         <slot :name="((item.slot ? `${item.slot}-trailing`: 'item-trailing') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :active="active" :index="index" :ui="ui">
-          <UIcon v-if="item.children?.length" :name="childrenIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color, active })" />
-          <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
+          <UIcon v-if="item.children?.length" :name="childrenIcon" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color, active })" />
+          <span v-else-if="item.kbds?.length" data-slot="itemTrailingKbds" :class="ui.itemTrailingKbds({ class: [uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
             <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((item.ui?.itemTrailingKbdsSize || uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
           </span>
         </slot>
 
         <DropdownMenu.ItemIndicator as-child>
-          <UIcon :name="checkedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color })" />
+          <UIcon :name="checkedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color })" />
         </DropdownMenu.ItemIndicator>
       </span>
     </slot>
   </DefineItemTemplate>
 
   <DropdownMenu.Portal v-bind="portalProps">
-    <component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" :class="ui.content({ class: [uiOverride?.content, props.class] })" v-bind="contentProps">
+    <component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" data-slot="content" :class="ui.content({ class: [uiOverride?.content, props.class] })" v-bind="contentProps">
       <slot name="content-top" />
 
-      <div role="presentation" :class="ui.viewport({ class: uiOverride?.viewport })">
-        <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
+      <div role="presentation" data-slot="viewport" :class="ui.viewport({ class: uiOverride?.viewport })">
+        <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: uiOverride?.group })">
           <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-            <DropdownMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
+            <DropdownMenu.Label v-if="item.type === 'label'" data-slot="label" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
               <ReuseItemTemplate :item="item" :index="index" />
             </DropdownMenu.Label>
-            <DropdownMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
+            <DropdownMenu.Separator v-else-if="item.type === 'separator'" data-slot="separator" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
             <DropdownMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
               <DropdownMenu.SubTrigger
                 as="button"
                 type="button"
                 :disabled="item.disabled"
                 :text-value="get(item, props.labelKey as string)"
+                data-slot="item"
                 :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
               >
                 <ReuseItemTemplate :item="item" :index="index" />
@@ -174,6 +175,7 @@ const groups = computed<DropdownMenuItem[][]>(() =>
               :model-value="item.checked"
               :disabled="item.disabled"
               :text-value="get(item, props.labelKey as string)"
+              data-slot="item"
               :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
               @update:model-value="item.onUpdateChecked"
               @select="item.onSelect"
@@ -188,7 +190,7 @@ const groups = computed<DropdownMenuItem[][]>(() =>
               @select="item.onSelect"
             >
               <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item as Omit<DropdownMenuItem, 'type'>)" custom>
-                <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color, active })">
+                <ULinkBase v-bind="slotProps" data-slot="item" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color, active })">
                   <ReuseItemTemplate :item="item" :active="active" :index="index" />
                 </ULinkBase>
               </ULink>
diff --git a/src/runtime/components/Empty.vue b/src/runtime/components/Empty.vue
index c499ea4ca4..ecdedc56a2 100644
--- a/src/runtime/components/Empty.vue
+++ b/src/runtime/components/Empty.vue
@@ -67,20 +67,20 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.empty || {})
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-if="!!slots.header || (icon || avatar || !!slots.leading) || (title || !!slots.title) || (description || !!slots.description)" :class="ui.header({ class: props.ui?.header })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!slots.header || (icon || avatar || !!slots.leading) || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header">
         <slot name="leading" :ui="ui">
-          <UAvatar v-if="icon || avatar" :icon="icon" v-bind="typeof avatar === 'object' ? avatar : {}" :class="ui.avatar({ class: props.ui?.avatar })" />
+          <UAvatar v-if="icon || avatar" :icon="icon" v-bind="typeof avatar === 'object' ? avatar : {}" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
         </slot>
 
-        <h2 v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+        <h2 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
             {{ title }}
           </slot>
         </h2>
 
-        <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+        <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
           <slot name="description">
             {{ description }}
           </slot>
@@ -88,9 +88,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.empty || {})
       </slot>
     </div>
 
-    <div v-if="!!slots.body || (actions?.length || !!slots.actions)" :class="ui.body({ class: props.ui?.body })">
+    <div v-if="!!slots.body || (actions?.length || !!slots.actions)" data-slot="body" :class="ui.body({ class: props.ui?.body })">
       <slot name="body">
-        <div v-if="actions?.length || !!slots.actions" :class="ui.actions({ class: props.ui?.actions })">
+        <div v-if="actions?.length || !!slots.actions" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
           <slot name="actions">
             <UButton v-for="(action, index) in actions" :key="index" :size="size" v-bind="action" />
           </slot>
@@ -98,7 +98,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.empty || {})
       </slot>
     </div>
 
-    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>
diff --git a/src/runtime/components/Error.vue b/src/runtime/components/Error.vue
index 129e048f74..4357c98a04 100644
--- a/src/runtime/components/Error.vue
+++ b/src/runtime/components/Error.vue
@@ -64,23 +64,23 @@ function handleError() {
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <p v-if="!!props.error?.statusCode || !!slots.statusCode" :class="ui.statusCode({ class: props.ui?.statusCode })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <p v-if="!!props.error?.statusCode || !!slots.statusCode" data-slot="statusCode" :class="ui.statusCode({ class: props.ui?.statusCode })">
       <slot name="statusCode">
         {{ props.error?.statusCode }}
       </slot>
     </p>
-    <h1 v-if="!!props.error?.statusMessage || !!slots.statusMessage" :class="ui.statusMessage({ class: props.ui?.statusMessage })">
+    <h1 v-if="!!props.error?.statusMessage || !!slots.statusMessage" data-slot="statusMessage" :class="ui.statusMessage({ class: props.ui?.statusMessage })">
       <slot name="statusMessage">
         {{ props.error?.statusMessage }}
       </slot>
     </h1>
-    <p v-if="(props.error?.message && props.error.message !== props.error.statusMessage) || !!slots.message" :class="ui.message({ class: props.ui?.message })">
+    <p v-if="(props.error?.message && props.error.message !== props.error.statusMessage) || !!slots.message" data-slot="message" :class="ui.message({ class: props.ui?.message })">
       <slot name="message">
         {{ props.error?.message }}
       </slot>
     </p>
-    <div v-if="!!clear || !!slots.links" :class="ui.links({ class: props.ui?.links })">
+    <div v-if="!!clear || !!slots.links" data-slot="links" :class="ui.links({ class: props.ui?.links })">
       <slot name="links">
         <UButton
           v-if="clear"
diff --git a/src/runtime/components/FileUpload.vue b/src/runtime/components/FileUpload.vue
index dbd9f993a4..337d1f106f 100644
--- a/src/runtime/components/FileUpload.vue
+++ b/src/runtime/components/FileUpload.vue
@@ -277,22 +277,29 @@ defineExpose({
     <template v-if="props.preview && modelValue && (Array.isArray(modelValue) ? modelValue.length : true)">
       <slot name="files-top" :files="modelValue" :open="open" :remove-file="removeFile" />
 
-      <div :class="ui.files({ class: props.ui?.files })">
+      <div data-slot="files" :class="ui.files({ class: props.ui?.files })">
         <slot name="files" :files="modelValue">
-          <div v-for="(file, index) in Array.isArray(modelValue) ? modelValue : [modelValue]" :key="(file as File).name" :class="ui.file({ class: props.ui?.file })">
+          <div v-for="(file, index) in Array.isArray(modelValue) ? modelValue : [modelValue]" :key="(file as File).name" data-slot="file" :class="ui.file({ class: props.ui?.file })">
             <slot name="file" :file="file" :index="index">
               <slot name="file-leading" :file="file" :index="index" :ui="ui">
-                <UAvatar :as="{ img: 'img' }" :src="createObjectUrl(file)" :icon="fileIcon || appConfig.ui.icons.file" :size="props.size" :class="ui.fileLeadingAvatar({ class: props.ui?.fileLeadingAvatar })" />
+                <UAvatar
+                  :as="{ img: 'img' }"
+                  :src="createObjectUrl(file)"
+                  :icon="fileIcon || appConfig.ui.icons.file"
+                  :size="props.size"
+                  data-slot="fileLeadingAvatar"
+                  :class="ui.fileLeadingAvatar({ class: props.ui?.fileLeadingAvatar })"
+                />
               </slot>
 
-              <div :class="ui.fileWrapper({ class: props.ui?.fileWrapper })">
-                <span :class="ui.fileName({ class: props.ui?.fileName })">
+              <div data-slot="fileWrapper" :class="ui.fileWrapper({ class: props.ui?.fileWrapper })">
+                <span data-slot="fileName" :class="ui.fileName({ class: props.ui?.fileName })">
                   <slot name="file-name" :file="file" :index="index">
                     {{ (file as File).name }}
                   </slot>
                 </span>
 
-                <span :class="ui.fileSize({ class: props.ui?.fileSize })">
+                <span data-slot="fileSize" :class="ui.fileSize({ class: props.ui?.fileSize })">
                   <slot name="file-size" :file="file" :index="index">
                     {{ formatFileSize((file as File).size) }}
                   </slot>
@@ -315,6 +322,7 @@ defineExpose({
                   }"
                   :aria-label="t('fileUpload.removeFile', { filename: (file as File).name })"
                   :trailing-icon="fileDeleteIcon || appConfig.ui.icons.close"
+                  data-slot="fileTrailingButton"
                   :class="ui.fileTrailingButton({ class: props.ui?.fileTrailingButton })"
                   @click.stop.prevent="removeFile(index)"
                 />
@@ -328,7 +336,7 @@ defineExpose({
     </template>
   </DefineFilesTemplate>
 
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot :open="open" :remove-file="removeFile" :ui="ui">
       <component
         :is="variant === 'button' ? 'button' : 'div'"
@@ -336,6 +344,7 @@ defineExpose({
         :type="variant === 'button' ? 'button' : undefined"
         :role="variant === 'button' ? undefined : 'button'"
         :data-dragging="isDragging"
+        data-slot="base"
         :class="ui.base({ class: props.ui?.base })"
         :tabindex="interactive && !disabled ? 0 : -1"
         @click="interactive && !disabled && open()"
@@ -344,25 +353,25 @@ defineExpose({
       >
         <ReuseFilesTemplate v-if="position === 'inside'" />
 
-        <div v-if="position === 'inside' ? (multiple ? !(modelValue as File[])?.length : !modelValue) : true" :class="ui.wrapper({ class: props.ui?.wrapper })">
+        <div v-if="position === 'inside' ? (multiple ? !(modelValue as File[])?.length : !modelValue) : true" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
           <slot name="leading" :ui="ui">
-            <UIcon v-if="variant === 'button'" :name="icon || appConfig.ui.icons.upload" :class="ui.icon({ class: props.ui?.icon })" />
-            <UAvatar v-else :icon="icon || appConfig.ui.icons.upload" :size="props.size" :class="ui.avatar({ class: props.ui?.avatar })" />
+            <UIcon v-if="variant === 'button'" :name="icon || appConfig.ui.icons.upload" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
+            <UAvatar v-else :icon="icon || appConfig.ui.icons.upload" :size="props.size" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
           </slot>
 
           <template v-if="variant !== 'button'">
-            <div v-if="label || !!slots.label" :class="ui.label({ class: props.ui?.label })">
+            <div v-if="label || !!slots.label" data-slot="label" :class="ui.label({ class: props.ui?.label })">
               <slot name="label">
                 {{ label }}
               </slot>
             </div>
-            <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+            <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
               <slot name="description">
                 {{ description }}
               </slot>
             </div>
 
-            <div v-if="!!slots.actions" :class="ui.actions({ class: props.ui?.actions })">
+            <div v-if="!!slots.actions" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
               <slot name="actions" :files="modelValue" :open="open" :remove-file="removeFile" />
             </div>
           </template>
diff --git a/src/runtime/components/Footer.vue b/src/runtime/components/Footer.vue
index eae721f362..1602cf3913 100644
--- a/src/runtime/components/Footer.vue
+++ b/src/runtime/components/Footer.vue
@@ -43,26 +43,26 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.footer || {}
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-if="!!slots.top" :class="ui.top({ class: props.ui?.top })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!slots.top" data-slot="top" :class="ui.top({ class: props.ui?.top })">
       <slot name="top" />
     </div>
 
-    <UContainer :class="ui.container({ class: props.ui?.container })">
-      <div :class="ui.right({ class: props.ui?.right })">
+    <UContainer data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div data-slot="right" :class="ui.right({ class: props.ui?.right })">
         <slot name="right" />
       </div>
 
-      <div :class="ui.center({ class: props.ui?.center })">
+      <div data-slot="center" :class="ui.center({ class: props.ui?.center })">
         <slot />
       </div>
 
-      <div :class="ui.left({ class: props.ui?.left })">
+      <div data-slot="left" :class="ui.left({ class: props.ui?.left })">
         <slot name="left" />
       </div>
     </UContainer>
 
-    <div v-if="!!slots.bottom" :class="ui.bottom({ class: props.ui?.bottom })">
+    <div v-if="!!slots.bottom" data-slot="bottom" :class="ui.bottom({ class: props.ui?.bottom })">
       <slot name="bottom" />
     </div>
   </Primitive>
diff --git a/src/runtime/components/FooterColumns.vue b/src/runtime/components/FooterColumns.vue
index f35516309d..d2c04b5e3e 100644
--- a/src/runtime/components/FooterColumns.vue
+++ b/src/runtime/components/FooterColumns.vue
@@ -68,35 +68,35 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.footerColumn
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-if="!!slots.left" :class="ui.left({ class: props.ui?.left })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!slots.left" data-slot="left" :class="ui.left({ class: props.ui?.left })">
       <slot name="left" />
     </div>
 
-    <div v-if="!!slots.default || columns?.length" :class="ui.center({ class: props.ui?.center })">
+    <div v-if="!!slots.default || columns?.length" data-slot="center" :class="ui.center({ class: props.ui?.center })">
       <slot>
         <div v-for="(column, index) in columns" :key="index">
-          <h3 :class="ui.label({ class: props.ui?.label })">
+          <h3 data-slot="label" :class="ui.label({ class: props.ui?.label })">
             <slot name="column-label" :column="column">
               {{ column.label }}
             </slot>
           </h3>
 
-          <ul :class="ui.list({ class: props.ui?.list })">
-            <li v-for="(link, linkIndex) in column.children" :key="linkIndex" :class="ui.item({ class: [props.ui?.item, link.ui?.item] })">
+          <ul data-slot="list" :class="ui.list({ class: props.ui?.list })">
+            <li v-for="(link, linkIndex) in column.children" :key="linkIndex" data-slot="item" :class="ui.item({ class: [props.ui?.item, link.ui?.item] })">
               <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(link)" custom>
-                <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active })">
+                <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active })">
                   <slot name="link" :link="(link as T)" :active="active" :ui="ui">
                     <slot name="link-leading" :link="(link as T)" :active="active" :ui="ui">
-                      <UIcon v-if="link.icon" :name="link.icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
+                      <UIcon v-if="link.icon" :name="link.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
                     </slot>
 
-                    <span v-if="link.label || !!slots['link-label']" :class="ui.linkLabel({ class: [props.ui?.linkLabel, link.ui?.linkLabel], active })">
+                    <span v-if="link.label || !!slots['link-label']" data-slot="linkLabel" :class="ui.linkLabel({ class: [props.ui?.linkLabel, link.ui?.linkLabel], active })">
                       <slot name="link-label" :link="(link as T)" :active="active">
                         {{ (link as T).label }}
                       </slot>
 
-                      <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, link.ui?.linkLabelExternalIcon], active })" />
+                      <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" data-slot="linkLabelExternalIcon" :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, link.ui?.linkLabelExternalIcon], active })" />
                     </span>
 
                     <slot name="link-trailing" :link="(link as T)" :active="active" />
@@ -109,7 +109,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.footerColumn
       </slot>
     </div>
 
-    <div v-if="!!slots.right" :class="ui.right({ class: props.ui?.right })">
+    <div v-if="!!slots.right" data-slot="right" :class="ui.right({ class: props.ui?.right })">
       <slot name="right" />
     </div>
   </Primitive>
diff --git a/src/runtime/components/FormField.vue b/src/runtime/components/FormField.vue
index ba67745b35..ffe5381497 100644
--- a/src/runtime/components/FormField.vue
+++ b/src/runtime/components/FormField.vue
@@ -98,22 +98,22 @@ provide(formFieldInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <div v-if="label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
-        <Label :for="id" :class="ui.label({ class: props.ui?.label })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <div v-if="label || !!slots.label" data-slot="labelWrapper" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
+        <Label :for="id" data-slot="label" :class="ui.label({ class: props.ui?.label })">
           <slot name="label" :label="label">
             {{ label }}
           </slot>
         </Label>
-        <span v-if="hint || !!slots.hint" :id="`${ariaId}-hint`" :class="ui.hint({ class: props.ui?.hint })">
+        <span v-if="hint || !!slots.hint" :id="`${ariaId}-hint`" data-slot="hint" :class="ui.hint({ class: props.ui?.hint })">
           <slot name="hint" :hint="hint">
             {{ hint }}
           </slot>
         </span>
       </div>
 
-      <p v-if="description || !!slots.description" :id="`${ariaId}-description`" :class="ui.description({ class: props.ui?.description })">
+      <p v-if="description || !!slots.description" :id="`${ariaId}-description`" data-slot="description" :class="ui.description({ class: props.ui?.description })">
         <slot name="description" :description="description">
           {{ description }}
         </slot>
@@ -123,12 +123,12 @@ provide(formFieldInjectionKey, computed(() => ({
     <div :class="[(label || !!slots.label || description || !!slots.description) && ui.container({ class: props.ui?.container })]">
       <slot :error="error" />
 
-      <div v-if="(typeof error === 'string' && error) || !!slots.error" :id="`${ariaId}-error`" :class="ui.error({ class: props.ui?.error })">
+      <div v-if="(typeof error === 'string' && error) || !!slots.error" :id="`${ariaId}-error`" data-slot="error" :class="ui.error({ class: props.ui?.error })">
         <slot name="error" :error="error">
           {{ error }}
         </slot>
       </div>
-      <div v-else-if="help || !!slots.help" :id="`${ariaId}-help`" :class="ui.help({ class: props.ui?.help })">
+      <div v-else-if="help || !!slots.help" :id="`${ariaId}-help`" data-slot="help" :class="ui.help({ class: props.ui?.help })">
         <slot name="help" :help="help">
           {{ help }}
         </slot>
diff --git a/src/runtime/components/Header.vue b/src/runtime/components/Header.vue
index 05877c2a1e..dd7ef9cade 100644
--- a/src/runtime/components/Header.vue
+++ b/src/runtime/components/Header.vue
@@ -130,6 +130,7 @@ function toggleOpen() {
         :aria-label="open ? t('header.close') : t('header.open')"
         :icon="open ? appConfig.ui.icons.close : appConfig.ui.icons.menu"
         v-bind="(typeof toggle === 'object' ? toggle as Partial<ButtonProps> : {})"
+        data-slot="toggle"
         :class="ui.toggle({ class: props.ui?.toggle, toggleSide })"
         @click="toggleOpen"
       />
@@ -137,11 +138,11 @@ function toggleOpen() {
   </DefineToggleTemplate>
 
   <DefineLeftTemplate>
-    <div :class="ui.left({ class: props.ui?.left })">
+    <div data-slot="left" :class="ui.left({ class: props.ui?.left })">
       <ReuseToggleTemplate v-if="toggleSide === 'left'" />
 
       <slot name="left">
-        <ULink :to="to" :aria-label="ariaLabel" :class="ui.title({ class: props.ui?.title })">
+        <ULink :to="to" :aria-label="ariaLabel" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
             {{ title }}
           </slot>
@@ -151,20 +152,20 @@ function toggleOpen() {
   </DefineLeftTemplate>
 
   <DefineRightTemplate>
-    <div :class="ui.right({ class: props.ui?.right })">
+    <div data-slot="right" :class="ui.right({ class: props.ui?.right })">
       <slot name="right" />
 
       <ReuseToggleTemplate v-if="toggleSide === 'right'" />
     </div>
   </DefineRightTemplate>
 
-  <Primitive :as="as" v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot name="top" />
 
-    <UContainer :class="ui.container({ class: props.ui?.container })">
+    <UContainer data-slot="container" :class="ui.container({ class: props.ui?.container })">
       <ReuseLeftTemplate />
 
-      <div :class="ui.center({ class: props.ui?.center })">
+      <div data-slot="center" :class="ui.center({ class: props.ui?.center })">
         <slot />
       </div>
 
@@ -186,13 +187,13 @@ function toggleOpen() {
   >
     <template #content="contentData">
       <slot name="content" v-bind="contentData">
-        <div v-if="mode !== 'drawer'" :class="ui.header({ class: props.ui?.header })">
+        <div v-if="mode !== 'drawer'" data-slot="header" :class="ui.header({ class: props.ui?.header })">
           <ReuseLeftTemplate />
 
           <ReuseRightTemplate />
         </div>
 
-        <div :class="ui.body({ class: props.ui?.body })">
+        <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
           <slot name="body" />
         </div>
       </slot>
diff --git a/src/runtime/components/Input.vue b/src/runtime/components/Input.vue
index e711e03cca..625af68958 100644
--- a/src/runtime/components/Input.vue
+++ b/src/runtime/components/Input.vue
@@ -176,7 +176,7 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <input
       :id="id"
       ref="inputRef"
@@ -184,6 +184,7 @@ defineExpose({
       :value="modelValue"
       :name="name"
       :placeholder="placeholder"
+      data-slot="base"
       :class="ui.base({ class: props.ui?.base })"
       :disabled="disabled"
       :required="required"
@@ -197,16 +198,16 @@ defineExpose({
 
     <slot :ui="ui" />
 
-    <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+    <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
       <slot name="leading" :ui="ui">
-        <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 })" />
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
       </slot>
     </span>
 
-    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
       <slot name="trailing" :ui="ui">
-        <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>
   </Primitive>
diff --git a/src/runtime/components/InputDate.vue b/src/runtime/components/InputDate.vue
index 42566853e4..1f65a079e3 100644
--- a/src/runtime/components/InputDate.vue
+++ b/src/runtime/components/InputDate.vue
@@ -161,6 +161,7 @@ defineExpose({
       :ref="el => (inputsRef[index] = el as ComponentPublicInstance)"
       :type="type"
       :part="segment.part"
+      data-slot="segment"
       :class="ui.segment({ class: props.ui?.segment })"
       :data-segment="segment.part"
     >
@@ -176,6 +177,7 @@ defineExpose({
     :default-value="(defaultValue as DateValue)"
     :name="name"
     :disabled="disabled"
+    data-slot="base"
     :class="ui.base({ class: [props.ui?.base, props.class] })"
     @update:model-value="onUpdate"
     @blur="onBlur"
@@ -187,23 +189,23 @@ defineExpose({
     <template v-else>
       <ReuseSegmentsTemplate :segments="segments.start" type="start" />
       <slot name="separator" :ui="ui">
-        <UIcon :name="separatorIcon || appConfig.ui.icons.minus" :class="ui.separatorIcon({ class: props.ui?.separatorIcon })" />
+        <UIcon :name="separatorIcon || appConfig.ui.icons.minus" data-slot="separatorIcon" :class="ui.separatorIcon({ class: props.ui?.separatorIcon })" />
       </slot>
       <ReuseSegmentsTemplate :segments="segments.end" type="end" />
     </template>
 
     <slot :ui="ui" />
 
-    <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+    <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
       <slot name="leading" :ui="ui">
-        <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 })" />
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
       </slot>
     </span>
 
-    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
       <slot name="trailing" :ui="ui">
-        <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>
   </DateField.Root>
diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index c61c74ddc0..890ddf5348 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -442,11 +442,12 @@ defineExpose({
 <template>
   <DefineCreateItemTemplate>
     <ComboboxItem
+      data-slot="item"
       :class="ui.item({ class: props.ui?.item })"
       :value="searchTerm"
       @select.prevent="emits('create', searchTerm)"
     >
-      <span :class="ui.itemLabel({ class: props.ui?.itemLabel })">
+      <span data-slot="itemLabel" :class="ui.itemLabel({ class: props.ui?.itemLabel })">
         <slot name="create-item-label" :item="searchTerm">
           {{ t('inputMenu.create', { label: searchTerm }) }}
         </slot>
@@ -455,14 +456,15 @@ defineExpose({
   </DefineCreateItemTemplate>
 
   <DefineItemTemplate v-slot="{ item, index }">
-    <ComboboxLabel v-if="isInputItem(item) && item.type === 'label'" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
+    <ComboboxLabel v-if="isInputItem(item) && item.type === 'label'" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
       {{ get(item, props.labelKey as string) }}
     </ComboboxLabel>
 
-    <ComboboxSeparator v-else-if="isInputItem(item) && item.type === 'separator'" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })" />
+    <ComboboxSeparator v-else-if="isInputItem(item) && item.type === 'separator'" data-slot="separator" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })" />
 
     <ComboboxItem
       v-else
+      data-slot="item"
       :class="ui.item({ class: [props.ui?.item, isInputItem(item) && item.ui?.item, isInputItem(item) && item.class] })"
       :disabled="isInputItem(item) && item.disabled"
       :value="props.valueKey && isInputItem(item) ? get(item, props.valueKey as string) : item"
@@ -470,37 +472,38 @@ defineExpose({
     >
       <slot name="item" :item="(item as NestedItem<T>)" :index="index" :ui="ui">
         <slot name="item-leading" :item="(item as NestedItem<T>)" :index="index" :ui="ui">
-          <UIcon v-if="isInputItem(item) && item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
-          <UAvatar v-else-if="isInputItem(item) && item.avatar" :size="((item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
+          <UIcon v-if="isInputItem(item) && item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
+          <UAvatar v-else-if="isInputItem(item) && item.avatar" :size="((item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
           <UChip
             v-else-if="isInputItem(item) && item.chip"
             :size="((item.ui?.itemLeadingChipSize || props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
             inset
             standalone
             v-bind="item.chip"
+            data-slot="itemLeadingChip"
             :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip] })"
           />
         </slot>
 
-        <span :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, isInputItem(item) && item.ui?.itemWrapper] })">
-          <span :class="ui.itemLabel({ class: [props.ui?.itemLabel, isInputItem(item) && item.ui?.itemLabel] })">
+        <span data-slot="itemWrapper" :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, isInputItem(item) && item.ui?.itemWrapper] })">
+          <span data-slot="itemLabel" :class="ui.itemLabel({ class: [props.ui?.itemLabel, isInputItem(item) && item.ui?.itemLabel] })">
             <slot name="item-label" :item="(item as NestedItem<T>)" :index="index">
               {{ isInputItem(item) ? get(item, props.labelKey as string) : item }}
             </slot>
           </span>
 
-          <span v-if="isInputItem(item) && (get(item, props.descriptionKey as string) || !!slots['item-description'])" :class="ui.itemDescription({ class: [props.ui?.itemDescription, isInputItem(item) && item.ui?.itemDescription] })">
+          <span v-if="isInputItem(item) && (get(item, props.descriptionKey as string) || !!slots['item-description'])" data-slot="itemDescription" :class="ui.itemDescription({ class: [props.ui?.itemDescription, isInputItem(item) && item.ui?.itemDescription] })">
             <slot name="item-description" :item="(item as NestedItem<T>)" :index="index">
               {{ get(item, props.descriptionKey as string) }}
             </slot>
           </span>
         </span>
 
-        <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isInputItem(item) && item.ui?.itemTrailing] })">
+        <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isInputItem(item) && item.ui?.itemTrailing] })">
           <slot name="item-trailing" :item="(item as NestedItem<T>)" :index="index" :ui="ui" />
 
           <ComboboxItemIndicator as-child>
-            <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isInputItem(item) && item.ui?.itemTrailingIcon] })" />
+            <UIcon :name="selectedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isInputItem(item) && item.ui?.itemTrailingIcon] })" />
           </ComboboxItemIndicator>
         </span>
       </slot>
@@ -512,6 +515,7 @@ defineExpose({
     v-bind="rootProps"
     :name="name"
     :disabled="disabled"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :as-child="!!multiple"
     ignore-filter
@@ -519,7 +523,7 @@ defineExpose({
     @update:open="onUpdateOpen"
     @keydown.enter="$event.preventDefault()"
   >
-    <ComboboxAnchor :as-child="!multiple" :class="ui.base({ class: props.ui?.base })">
+    <ComboboxAnchor :as-child="!multiple" data-slot="base" :class="ui.base({ class: props.ui?.base })">
       <TagsInputRoot
         v-if="multiple"
         v-slot="{ modelValue: tags }"
@@ -532,16 +536,16 @@ defineExpose({
         @focus="onFocus"
         @remove-tag="onRemoveTag($event, modelValue as GetModelValue<T, VK, true>)"
       >
-        <TagsInputItem v-for="(item, index) in tags" :key="index" :value="item" :class="ui.tagsItem({ class: [props.ui?.tagsItem, isInputItem(item) && item.ui?.tagsItem] })">
-          <TagsInputItemText :class="ui.tagsItemText({ class: [props.ui?.tagsItemText, isInputItem(item) && item.ui?.tagsItemText] })">
+        <TagsInputItem v-for="(item, index) in tags" :key="index" :value="item" data-slot="tagsItem" :class="ui.tagsItem({ class: [props.ui?.tagsItem, isInputItem(item) && item.ui?.tagsItem] })">
+          <TagsInputItemText data-slot="tagsItemText" :class="ui.tagsItemText({ class: [props.ui?.tagsItemText, isInputItem(item) && item.ui?.tagsItemText] })">
             <slot name="tags-item-text" :item="(item as NestedItem<T>)" :index="index">
               {{ displayValue(item as GetItemValue<T, VK>) }}
             </slot>
           </TagsInputItemText>
 
-          <TagsInputItemDelete :class="ui.tagsItemDelete({ class: [props.ui?.tagsItemDelete, isInputItem(item) && item.ui?.tagsItemDelete] })" :disabled="disabled">
+          <TagsInputItemDelete data-slot="tagsItemDelete" :class="ui.tagsItemDelete({ class: [props.ui?.tagsItemDelete, isInputItem(item) && item.ui?.tagsItemDelete] })" :disabled="disabled">
             <slot name="tags-item-delete" :item="(item as NestedItem<T>)" :index="index" :ui="ui">
-              <UIcon :name="deleteIcon || appConfig.ui.icons.close" :class="ui.tagsItemDeleteIcon({ class: [props.ui?.tagsItemDeleteIcon, isInputItem(item) && item.ui?.tagsItemDeleteIcon] })" />
+              <UIcon :name="deleteIcon || appConfig.ui.icons.close" data-slot="tagsItemDeleteIcon" :class="ui.tagsItemDeleteIcon({ class: [props.ui?.tagsItemDeleteIcon, isInputItem(item) && item.ui?.tagsItemDeleteIcon] })" />
             </slot>
           </TagsInputItemDelete>
         </TagsInputItem>
@@ -552,6 +556,7 @@ defineExpose({
             ref="inputRef"
             v-bind="{ ...$attrs, ...ariaAttrs }"
             :placeholder="placeholder"
+            data-slot="tagsInput"
             :class="ui.tagsInput({ class: props.ui?.tagsInput })"
             @keydown.enter.prevent
           />
@@ -572,31 +577,31 @@ defineExpose({
         @update:model-value="searchTerm = $event"
       />
 
-      <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+      <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
         <slot name="leading" :model-value="(modelValue as GetModelValue<T, VK, M>)" :open="open" :ui="ui">
-          <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-          <UAvatar v-else-if="!!avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
+          <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+          <UAvatar v-else-if="!!avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
         </slot>
       </span>
 
-      <ComboboxTrigger v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+      <ComboboxTrigger v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
         <slot name="trailing" :model-value="(modelValue as GetModelValue<T, VK, M>)" :open="open" :ui="ui">
-          <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+          <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
         </slot>
       </ComboboxTrigger>
     </ComboboxAnchor>
 
     <ComboboxPortal v-bind="portalProps">
-      <ComboboxContent :class="ui.content({ class: props.ui?.content })" v-bind="contentProps" @focus-outside.prevent>
+      <ComboboxContent data-slot="content" :class="ui.content({ class: props.ui?.content })" v-bind="contentProps" @focus-outside.prevent>
         <slot name="content-top" />
 
-        <ComboboxEmpty :class="ui.empty({ class: props.ui?.empty })">
+        <ComboboxEmpty data-slot="empty" :class="ui.empty({ class: props.ui?.empty })">
           <slot name="empty" :search-term="searchTerm">
             {{ searchTerm ? t('inputMenu.noMatch', { searchTerm }) : t('inputMenu.noData') }}
           </slot>
         </ComboboxEmpty>
 
-        <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+        <div role="presentation" data-slot="viewport" :class="ui.viewport({ class: props.ui?.viewport })">
           <template v-if="!!virtualize">
             <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'top'" />
 
@@ -613,15 +618,15 @@ defineExpose({
           </template>
 
           <template v-else>
-            <ComboboxGroup v-if="createItem && createItemPosition === 'top'" :class="ui.group({ class: props.ui?.group })">
+            <ComboboxGroup v-if="createItem && createItemPosition === 'top'" data-slot="group" :class="ui.group({ class: props.ui?.group })">
               <ReuseCreateItemTemplate />
             </ComboboxGroup>
 
-            <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
+            <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: props.ui?.group })">
               <ReuseItemTemplate v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`" :item="item" :index="index" />
             </ComboboxGroup>
 
-            <ComboboxGroup v-if="createItem && createItemPosition === 'bottom'" :class="ui.group({ class: props.ui?.group })">
+            <ComboboxGroup v-if="createItem && createItemPosition === 'bottom'" data-slot="group" :class="ui.group({ class: props.ui?.group })">
               <ReuseCreateItemTemplate />
             </ComboboxGroup>
           </template>
@@ -629,7 +634,7 @@ defineExpose({
 
         <slot name="content-bottom" />
 
-        <ComboboxArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
+        <ComboboxArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
       </ComboboxContent>
     </ComboboxPortal>
   </ComboboxRoot>
diff --git a/src/runtime/components/InputNumber.vue b/src/runtime/components/InputNumber.vue
index d2e29821fd..80b799a3b9 100644
--- a/src/runtime/components/InputNumber.vue
+++ b/src/runtime/components/InputNumber.vue
@@ -163,6 +163,7 @@ defineExpose({
     v-bind="rootProps"
     :id="id"
     :model-value="modelValue"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :name="name"
     :disabled="disabled"
@@ -173,12 +174,13 @@ defineExpose({
       ref="inputRef"
       :placeholder="placeholder"
       :required="required"
+      data-slot="base"
       :class="ui.base({ class: props.ui?.base })"
       @blur="onBlur"
       @focus="emitFormFocus"
     />
 
-    <div v-if="!!increment" :class="ui.increment({ class: props.ui?.increment })">
+    <div v-if="!!increment" data-slot="increment" :class="ui.increment({ class: props.ui?.increment })">
       <NumberFieldIncrement as-child :disabled="disabled || incrementDisabled">
         <slot name="increment">
           <UButton
@@ -193,7 +195,7 @@ defineExpose({
       </NumberFieldIncrement>
     </div>
 
-    <div v-if="!!decrement" :class="ui.decrement({ class: props.ui?.decrement })">
+    <div v-if="!!decrement" data-slot="decrement" :class="ui.decrement({ class: props.ui?.decrement })">
       <NumberFieldDecrement as-child :disabled="disabled || decrementDisabled">
         <slot name="decrement">
           <UButton
diff --git a/src/runtime/components/InputTags.vue b/src/runtime/components/InputTags.vue
index 6ed4c25922..79f88e4159 100644
--- a/src/runtime/components/InputTags.vue
+++ b/src/runtime/components/InputTags.vue
@@ -153,6 +153,7 @@ defineExpose({
     v-slot="{ modelValue: tags }"
     :model-value="modelValue"
     :default-value="defaultValue"
+    data-slot="root"
     :class="ui.root({ class: [ui.base({ class: props.ui?.base }), props.ui?.root, props.class] })"
     v-bind="rootProps"
     :name="name"
@@ -163,18 +164,20 @@ defineExpose({
       v-for="(item, index) in tags"
       :key="index"
       :value="item"
+      data-slot="item"
       :class="ui.item({ class: [props.ui?.item] })"
     >
-      <TagsInputItemText :class="ui.itemText({ class: [props.ui?.itemText] })">
+      <TagsInputItemText data-slot="itemText" :class="ui.itemText({ class: [props.ui?.itemText] })">
         <slot v-if="!!slots['item-text']" name="item-text" :item="(item as T)" :index="index" :ui="ui" />
       </TagsInputItemText>
 
       <TagsInputItemDelete
+        data-slot="itemDelete"
         :class="ui.itemDelete({ class: [props.ui?.itemDelete] })"
         :disabled="disabled"
       >
         <slot name="item-delete" :item="(item as T)" :index="index" :ui="ui">
-          <UIcon :name="deleteIcon || appConfig.ui.icons.close" :class="ui.itemDeleteIcon({ class: [props.ui?.itemDeleteIcon] })" />
+          <UIcon :name="deleteIcon || appConfig.ui.icons.close" data-slot="itemDeleteIcon" :class="ui.itemDeleteIcon({ class: [props.ui?.itemDeleteIcon] })" />
         </slot>
       </TagsInputItemDelete>
     </TagsInputItem>
@@ -184,6 +187,7 @@ defineExpose({
       v-bind="{ ...$attrs, ...ariaAttrs }"
       :placeholder="placeholder"
       :max-length="maxLength"
+      data-slot="input"
       :class="ui.input({ class: props.ui?.input })"
       @blur="onBlur"
       @focus="onFocus"
@@ -191,16 +195,16 @@ defineExpose({
 
     <slot :ui="ui" />
 
-    <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+    <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
       <slot name="leading" :ui="ui">
-        <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 })" />
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
       </slot>
     </span>
 
-    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
       <slot name="trailing" :ui="ui">
-        <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>
   </TagsInputRoot>
diff --git a/src/runtime/components/InputTime.vue b/src/runtime/components/InputTime.vue
index 48b5f44567..a4b56d47c1 100644
--- a/src/runtime/components/InputTime.vue
+++ b/src/runtime/components/InputTime.vue
@@ -132,6 +132,7 @@ defineExpose({
     v-slot="{ segments }"
     :name="name"
     :disabled="disabled"
+    data-slot="base"
     :class="ui.base({ class: [props.ui?.base, props.class] })"
     @update:model-value="onUpdate"
     @blur="onBlur"
@@ -142,6 +143,7 @@ defineExpose({
       :key="`${segment.part}-${index}`"
       :ref="el => (inputsRef[index] = el as ComponentPublicInstance)"
       :part="segment.part"
+      data-slot="segment"
       :class="ui.segment({ class: props.ui?.segment })"
     >
       {{ segment.value.trim() }}
@@ -149,16 +151,16 @@ defineExpose({
 
     <slot :ui="ui" />
 
-    <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+    <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
       <slot name="leading" :ui="ui">
-        <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 })" />
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
       </slot>
     </span>
 
-    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
       <slot name="trailing" :ui="ui">
-        <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>
   </TimeFieldRoot>
diff --git a/src/runtime/components/Marquee.vue b/src/runtime/components/Marquee.vue
index 13a067db60..5c6e3690c2 100644
--- a/src/runtime/components/Marquee.vue
+++ b/src/runtime/components/Marquee.vue
@@ -69,8 +69,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.marquee || {
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-for="i in repeat" :key="i" :class="ui.content({ class: [props.ui?.content] })">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-for="i in repeat" :key="i" data-slot="content" :class="ui.content({ class: [props.ui?.content] })">
       <slot />
     </div>
   </Primitive>
diff --git a/src/runtime/components/Modal.vue b/src/runtime/components/Modal.vue
index d9c36dd0eb..3a270f7f27 100644
--- a/src/runtime/components/Modal.vue
+++ b/src/runtime/components/Modal.vue
@@ -148,7 +148,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
 <template>
   <DialogRoot v-slot="{ open, close }" v-bind="rootProps">
     <DefineContentTemplate>
-      <DialogContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" @after-enter="emits('after:enter')" @after-leave="emits('after:leave')" v-on="contentEvents">
+      <DialogContent
+        data-slot="content"
+        :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
+        v-bind="contentProps"
+        @after-enter="emits('after:enter')"
+        @after-leave="emits('after:leave')"
+        v-on="contentEvents"
+      >
         <VisuallyHidden v-if="!!slots.content && ((title || !!slots.title) || (description || !!slots.description))">
           <DialogTitle v-if="title || !!slots.title">
             <slot name="title">
@@ -164,16 +171,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
         </VisuallyHidden>
 
         <slot name="content" :close="close">
-          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" :class="ui.header({ class: props.ui?.header })">
+          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
             <slot name="header" :close="close">
-              <div :class="ui.wrapper({ class: props.ui?.wrapper })">
-                <DialogTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+              <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+                <DialogTitle v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
                   <slot name="title">
                     {{ title }}
                   </slot>
                 </DialogTitle>
 
-                <DialogDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+                <DialogDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
                   <slot name="description">
                     {{ description }}
                   </slot>
@@ -191,6 +198,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
                     variant="ghost"
                     :aria-label="t('modal.close')"
                     v-bind="(typeof props.close === 'object' ? props.close as Partial<ButtonProps> : {})"
+                    data-slot="close"
                     :class="ui.close({ class: props.ui?.close })"
                   />
                 </slot>
@@ -198,11 +206,11 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
             </slot>
           </div>
 
-          <div v-if="!!slots.body" :class="ui.body({ class: props.ui?.body })">
+          <div v-if="!!slots.body" data-slot="body" :class="ui.body({ class: props.ui?.body })">
             <slot name="body" :close="close" />
           </div>
 
-          <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+          <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
             <slot name="footer" :close="close" />
           </div>
         </slot>
@@ -215,13 +223,13 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
 
     <DialogPortal v-bind="portalProps">
       <template v-if="scrollable">
-        <DialogOverlay :class="ui.overlay({ class: props.ui?.overlay })">
+        <DialogOverlay data-slot="overlay" :class="ui.overlay({ class: props.ui?.overlay })">
           <ReuseContentTemplate />
         </DialogOverlay>
       </template>
 
       <template v-else>
-        <DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
+        <DialogOverlay v-if="overlay" data-slot="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
 
         <ReuseContentTemplate />
       </template>
diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue
index 011a85de2a..c2cfb3e23f 100644
--- a/src/runtime/components/NavigationMenu.vue
+++ b/src/runtime/components/NavigationMenu.vue
@@ -257,22 +257,30 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
   <DefineLinkTemplate v-slot="{ item, active, index }">
     <slot :name="((item.slot || 'item') as keyof NavigationMenuSlots<T>)" :item="item" :index="index" :active="active" :ui="ui">
       <slot :name="((item.slot ? `${item.slot}-leading` : 'item-leading') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index" :ui="ui">
-        <UAvatar v-if="item.avatar" :size="((item.ui?.linkLeadingAvatarSize || props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active, disabled: !!item.disabled })" />
-        <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active, disabled: !!item.disabled })" />
+        <UAvatar v-if="item.avatar" :size="((item.ui?.linkLeadingAvatarSize || props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="linkLeadingAvatar" :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active, disabled: !!item.disabled })" />
+        <UIcon v-else-if="item.icon" :name="item.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active, disabled: !!item.disabled })" />
       </slot>
 
       <span
         v-if="(!collapsed || orientation !== 'vertical') && (get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label` : 'item-label') as keyof NavigationMenuSlots<T>])"
+        data-slot="linkLabel"
         :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })"
       >
         <slot :name="((item.slot ? `${item.slot}-label` : 'item-label') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
           {{ get(item, props.labelKey as string) }}
         </slot>
 
-        <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, item.ui?.linkLabelExternalIcon], active })" />
+        <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" data-slot="linkLabelExternalIcon" :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, item.ui?.linkLabelExternalIcon], active })" />
       </span>
 
-      <component :is="orientation === 'vertical' && item.children?.length && !collapsed ? AccordionTrigger : 'span'" v-if="(!collapsed || orientation !== 'vertical') && ((item.badge || item.badge === 0) || (orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (orientation === 'vertical' && item.children?.length) || item.trailingIcon || !!slots[(item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>])" as="span" :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })" @click.stop.prevent>
+      <component
+        :is="orientation === 'vertical' && item.children?.length && !collapsed ? AccordionTrigger : 'span'"
+        v-if="(!collapsed || orientation !== 'vertical') && ((item.badge || item.badge === 0) || (orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (orientation === 'vertical' && item.children?.length) || item.trailingIcon || !!slots[(item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>])"
+        as="span"
+        data-slot="linkTrailing"
+        :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })"
+        @click.stop.prevent
+      >
         <slot :name="((item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index" :ui="ui">
           <UBadge
             v-if="item.badge || item.badge === 0"
@@ -280,11 +288,12 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
             variant="outline"
             :size="((item.ui?.linkTrailingBadgeSize || props.ui?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()) as BadgeProps['size'])"
             v-bind="(typeof item.badge === 'string' || typeof item.badge === 'number') ? { label: item.badge } : item.badge"
+            data-slot="linkTrailingBadge"
             :class="ui.linkTrailingBadge({ class: [props.ui?.linkTrailingBadge, item.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, item.ui?.linkTrailingIcon], active })" />
-          <UIcon v-else-if="item.trailingIcon" :name="item.trailingIcon" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.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)" :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" data-slot="linkTrailingIcon" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon], active })" />
+          <UIcon v-else-if="item.trailingIcon" :name="item.trailingIcon" data-slot="linkTrailingIcon" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon], active })" />
         </slot>
       </component>
     </slot>
@@ -296,7 +305,7 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
       as="li"
       :value="item.value || (level > 0 ? `item-${level}-${index}` : `item-${index}`)"
     >
-      <div v-if="orientation === 'vertical' && item.type === 'label' && !collapsed" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
+      <div v-if="orientation === 'vertical' && item.type === 'label' && !collapsed" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
         <ReuseLinkTemplate :item="item" :index="index" />
       </div>
       <ULink v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="(orientation === 'vertical' && item.children?.length && !collapsed && item.type === 'trigger') ? {} : pickLinkProps(item as Omit<NavigationMenuItem, 'type'>)" custom>
@@ -308,7 +317,7 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
           @select="item.onSelect"
         >
           <UPopover v-if="orientation === 'vertical' && collapsed && item.children?.length && (!!props.popover || !!item.popover)" v-bind="{ ...popoverProps, ...(typeof item.popover === 'boolean' ? {} : item.popover || {}) }" :ui="{ content: ui.content({ class: [props.ui?.content, item.ui?.content] }) }">
-            <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: level > 0 })">
+            <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: level > 0 })">
               <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
             </ULinkBase>
 
@@ -321,20 +330,20 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
                 :ui="ui"
                 :close="close"
               >
-                <ul :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })">
-                  <li :class="ui.childLabel({ class: [props.ui?.childLabel, item.ui?.childLabel] })">
+                <ul data-slot="childList" :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })">
+                  <li data-slot="childLabel" :class="ui.childLabel({ class: [props.ui?.childLabel, item.ui?.childLabel] })">
                     {{ get(item, props.labelKey as string) }}
                   </li>
-                  <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })">
+                  <li v-for="(childItem, childIndex) in item.children" :key="childIndex" data-slot="childItem" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })">
                     <ULink v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
                       <NavigationMenuLink as-child :active="childActive" @select="childItem.onSelect">
-                        <ULinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })">
-                          <UIcon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" />
+                        <ULinkBase v-bind="childSlotProps" data-slot="childLink" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })">
+                          <UIcon v-if="childItem.icon" :name="childItem.icon" data-slot="childLinkIcon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" />
 
-                          <span :class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })">
+                          <span data-slot="childLinkLabel" :class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })">
                             {{ get(childItem, props.labelKey as string) }}
 
-                            <UIcon v-if="childItem.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: [props.ui?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" />
+                            <UIcon v-if="childItem.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" data-slot="childLinkLabelExternalIcon" :class="ui.childLinkLabelExternalIcon({ class: [props.ui?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" />
                           </span>
                         </ULinkBase>
                       </NavigationMenuLink>
@@ -345,31 +354,31 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
             </template>
           </UPopover>
           <UTooltip v-else-if="orientation === 'vertical' && collapsed && (!!props.tooltip || !!item.tooltip)" :text="get(item, props.labelKey as string)" v-bind="{ ...tooltipProps, ...(typeof item.tooltip === 'boolean' ? {} : item.tooltip || {}) }">
-            <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: level > 0 })">
+            <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: level > 0 })">
               <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
             </ULinkBase>
           </UTooltip>
-          <ULinkBase v-else v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: orientation === 'horizontal' || level > 0 })">
+          <ULinkBase v-else v-bind="slotProps" data-slot="link" :class="ui.link({ class: [props.ui?.link, item.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>
 
-        <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, item.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" data-slot="content" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
           <slot :name="((item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>)" :item="item" :active="active || item.active" :index="index" :ui="ui">
-            <ul :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })">
-              <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })">
+            <ul data-slot="childList" :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })">
+              <li v-for="(childItem, childIndex) in item.children" :key="childIndex" data-slot="childItem" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })">
                 <ULink v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
                   <NavigationMenuLink as-child :active="childActive" @select="childItem.onSelect">
-                    <ULinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })">
-                      <UIcon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" />
+                    <ULinkBase v-bind="childSlotProps" data-slot="childLink" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })">
+                      <UIcon v-if="childItem.icon" :name="childItem.icon" data-slot="childLinkIcon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" />
 
-                      <div :class="ui.childLinkWrapper({ class: [props.ui?.childLinkWrapper, item.ui?.childLinkWrapper] })">
-                        <p :class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })">
+                      <div data-slot="childLinkWrapper" :class="ui.childLinkWrapper({ class: [props.ui?.childLinkWrapper, item.ui?.childLinkWrapper] })">
+                        <p data-slot="childLinkLabel" :class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })">
                           {{ get(childItem, props.labelKey as string) }}
 
-                          <UIcon v-if="childItem.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: [props.ui?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" />
+                          <UIcon v-if="childItem.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" data-slot="childLinkLabelExternalIcon" :class="ui.childLinkLabelExternalIcon({ class: [props.ui?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" />
                         </p>
-                        <p v-if="childItem.description" :class="ui.childLinkDescription({ class: [props.ui?.childLinkDescription, item.ui?.childLinkDescription], active: childActive })">
+                        <p v-if="childItem.description" data-slot="childLinkDescription" :class="ui.childLinkDescription({ class: [props.ui?.childLinkDescription, item.ui?.childLinkDescription], active: childActive })">
                           {{ childItem.description }}
                         </p>
                       </div>
@@ -382,13 +391,14 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
         </NavigationMenuContent>
       </ULink>
 
-      <AccordionContent v-if="orientation === 'vertical' && item.children?.length && !collapsed" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
+      <AccordionContent v-if="orientation === 'vertical' && item.children?.length && !collapsed" data-slot="content" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
         <AccordionRoot
           v-bind="({
             ...accordionProps,
             defaultValue: getAccordionDefaultValue(item.children, level + 1)
           } as AccordionRootProps)"
           as="ul"
+          data-slot="childList"
           :class="ui.childList({ class: props.ui?.childList })"
         >
           <ReuseItemTemplate
@@ -397,6 +407,7 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
             :item="childItem"
             :index="childIndex"
             :level="level + 1"
+            data-slot="childItem"
             :class="ui.childItem({ class: [props.ui?.childItem, childItem.ui?.childItem] })"
           />
         </AccordionRoot>
@@ -404,7 +415,7 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
     </component>
   </DefineItemTemplate>
 
-  <NavigationMenuRoot v-bind="{ ...rootProps, ...$attrs }" :data-collapsed="collapsed" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <NavigationMenuRoot v-bind="{ ...rootProps, ...$attrs }" :data-collapsed="collapsed" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot name="list-leading" />
 
     <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
@@ -415,22 +426,30 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
         } : {}"
         :is="orientation === 'vertical' && !collapsed ? AccordionRoot : NavigationMenuList"
         as="ul"
+        data-slot="list"
         :class="ui.list({ class: props.ui?.list })"
       >
-        <ReuseItemTemplate v-for="(item, index) in list" :key="`list-${listIndex}-${index}`" :item="item" :index="index" :class="ui.item({ class: [props.ui?.item, item.ui?.item] })" />
+        <ReuseItemTemplate
+          v-for="(item, index) in list"
+          :key="`list-${listIndex}-${index}`"
+          :item="item"
+          :index="index"
+          data-slot="item"
+          :class="ui.item({ class: [props.ui?.item, item.ui?.item] })"
+        />
       </component>
 
-      <div v-if="orientation === 'vertical' && listIndex < lists.length - 1" :class="ui.separator({ class: props.ui?.separator })" />
+      <div v-if="orientation === 'vertical' && listIndex < lists.length - 1" data-slot="separator" :class="ui.separator({ class: props.ui?.separator })" />
     </template>
 
     <slot name="list-trailing" />
 
-    <div v-if="orientation === 'horizontal'" :class="ui.viewportWrapper({ class: props.ui?.viewportWrapper })">
-      <NavigationMenuIndicator v-if="arrow" :class="ui.indicator({ class: props.ui?.indicator })">
-        <div :class="ui.arrow({ class: props.ui?.arrow })" />
+    <div v-if="orientation === 'horizontal'" data-slot="viewportWrapper" :class="ui.viewportWrapper({ class: props.ui?.viewportWrapper })">
+      <NavigationMenuIndicator v-if="arrow" data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
+        <div data-slot="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
       </NavigationMenuIndicator>
 
-      <NavigationMenuViewport :class="ui.viewport({ class: props.ui?.viewport })" />
+      <NavigationMenuViewport data-slot="viewport" :class="ui.viewport({ class: props.ui?.viewport })" />
     </div>
   </NavigationMenuRoot>
 </template>
diff --git a/src/runtime/components/Page.vue b/src/runtime/components/Page.vue
index 616dc9cab2..45a7f9f746 100644
--- a/src/runtime/components/Page.vue
+++ b/src/runtime/components/Page.vue
@@ -41,16 +41,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.page || {})
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <Slot v-if="!!slots.left" :class="ui.left({ class: props.ui?.left })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <Slot v-if="!!slots.left" data-slot="left" :class="ui.left({ class: props.ui?.left })">
       <slot name="left" />
     </Slot>
 
-    <div :class="ui.center({ class: props.ui?.center })">
+    <div data-slot="center" :class="ui.center({ class: props.ui?.center })">
       <slot />
     </div>
 
-    <Slot v-if="!!slots.right" :class="ui.right({ class: props.ui?.right })">
+    <Slot v-if="!!slots.right" data-slot="right" :class="ui.right({ class: props.ui?.right })">
       <slot name="right" />
     </Slot>
   </Primitive>
diff --git a/src/runtime/components/PageAnchors.vue b/src/runtime/components/PageAnchors.vue
index 4fc6728a9e..817ad2769c 100644
--- a/src/runtime/components/PageAnchors.vue
+++ b/src/runtime/components/PageAnchors.vue
@@ -59,24 +59,24 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageAnchors
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <ul :class="ui.list({ class: props.ui?.list })">
-      <li v-for="(link, index) in links" :key="index" :class="ui.item({ class: [props.ui?.item, link.ui?.item] })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <ul data-slot="list" :class="ui.list({ class: props.ui?.list })">
+      <li v-for="(link, index) in links" :key="index" data-slot="item" :class="ui.item({ class: [props.ui?.item, link.ui?.item] })">
         <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(link)" custom>
-          <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active })">
+          <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active })">
             <slot name="link" :link="link" :active="active" :ui="ui">
-              <div v-if="link.icon || !!slots['link-leading']" :class="ui.linkLeading({ class: [props.ui?.linkLeading, link.ui?.linkLeading], active })">
+              <div v-if="link.icon || !!slots['link-leading']" data-slot="linkLeading" :class="ui.linkLeading({ class: [props.ui?.linkLeading, link.ui?.linkLeading], active })">
                 <slot name="link-leading" :link="link" :active="active" :ui="ui">
-                  <UIcon v-if="link.icon" :name="link.icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
+                  <UIcon v-if="link.icon" :name="link.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
                 </slot>
               </div>
 
-              <span v-if="link.label || !!slots['link-label']" :class="ui.linkLabel({ class: [props.ui?.linkLabel, link.ui?.linkLabel], active })">
+              <span v-if="link.label || !!slots['link-label']" data-slot="linkLabel" :class="ui.linkLabel({ class: [props.ui?.linkLabel, link.ui?.linkLabel], active })">
                 <slot name="link-label" :link="link" :active="active">
                   {{ link.label }}
                 </slot>
 
-                <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, link.ui?.linkLabelExternalIcon], active })" />
+                <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" data-slot="linkLabelExternalIcon" :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, link.ui?.linkLabelExternalIcon], active })" />
               </span>
 
               <slot name="link-trailing" :link="link" :active="active" />
diff --git a/src/runtime/components/PageAside.vue b/src/runtime/components/PageAside.vue
index 06264e7f8f..a1576243b2 100644
--- a/src/runtime/components/PageAside.vue
+++ b/src/runtime/components/PageAside.vue
@@ -40,14 +40,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageAside ||
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.container({ class: props.ui?.container })">
-      <div v-if="!!slots.top" :class="ui.top({ class: props.ui?.top })">
-        <div :class="ui.topHeader({ class: props.ui?.topHeader })" />
-        <div :class="ui.topBody({ class: props.ui?.topBody })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div v-if="!!slots.top" data-slot="top" :class="ui.top({ class: props.ui?.top })">
+        <div data-slot="topHeader" :class="ui.topHeader({ class: props.ui?.topHeader })" />
+        <div data-slot="topBody" :class="ui.topBody({ class: props.ui?.topBody })">
           <slot name="top" />
         </div>
-        <div :class="ui.topFooter({ class: props.ui?.topFooter })" />
+        <div data-slot="topFooter" :class="ui.topFooter({ class: props.ui?.topFooter })" />
       </div>
 
       <slot />
diff --git a/src/runtime/components/PageCTA.vue b/src/runtime/components/PageCTA.vue
index 3fd3f10dbc..ce007d6d6c 100644
--- a/src/runtime/components/PageCTA.vue
+++ b/src/runtime/components/PageCTA.vue
@@ -75,20 +75,20 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageCTA || {
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot name="top" />
 
-    <UContainer :class="ui.container({ class: props.ui?.container })">
-      <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || !!slots.body || !!slots.footer || (links?.length || !!slots.links)" :class="ui.wrapper({ class: props.ui?.wrapper })">
-        <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description)" :class="ui.header({ class: props.ui?.header })">
+    <UContainer data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || !!slots.body || !!slots.footer || (links?.length || !!slots.links)" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+        <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
           <slot name="header">
-            <h2 v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+            <h2 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
               <slot name="title">
                 {{ title }}
               </slot>
             </h2>
 
-            <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+            <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
               <slot name="description">
                 {{ description }}
               </slot>
@@ -96,13 +96,13 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageCTA || {
           </slot>
         </div>
 
-        <div v-if="!!slots.body" :class="ui.body({ class: props.ui?.body })">
+        <div v-if="!!slots.body" data-slot="body" :class="ui.body({ class: props.ui?.body })">
           <slot name="body" />
         </div>
 
-        <div v-if="!!slots.footer || (links?.length || !!slots.links)" :class="ui.footer({ class: props.ui?.footer })">
+        <div v-if="!!slots.footer || (links?.length || !!slots.links)" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
           <slot name="footer">
-            <div v-if="links?.length || !!slots.links" :class="ui.links({ class: props.ui?.links })">
+            <div v-if="links?.length || !!slots.links" data-slot="links" :class="ui.links({ class: props.ui?.links })">
               <slot name="links">
                 <UButton v-for="(link, index) in links" :key="index" size="lg" v-bind="link" />
               </slot>
diff --git a/src/runtime/components/PageCard.vue b/src/runtime/components/PageCard.vue
index f2bd4a2ae4..968f4b5b51 100644
--- a/src/runtime/components/PageCard.vue
+++ b/src/runtime/components/PageCard.vue
@@ -125,33 +125,34 @@ const ariaLabel = computed(() => {
     ref="cardRef"
     :as="as"
     :data-orientation="orientation"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="spotlight && { '--spotlight-x': `${elementX}px`, '--spotlight-y': `${elementY}px` }"
     @click="onClick"
   >
-    <div v-if="props.spotlight" :class="ui.spotlight({ class: props.ui?.spotlight })" />
+    <div v-if="props.spotlight" data-slot="spotlight" :class="ui.spotlight({ class: props.ui?.spotlight })" />
 
-    <div :class="ui.container({ class: props.ui?.container })">
-      <div v-if="!!slots.header || (icon || !!slots.leading) || !!slots.body || (title || !!slots.title) || (description || !!slots.description) || !!slots.footer" :class="ui.wrapper({ class: props.ui?.wrapper })">
-        <div v-if="!!slots.header" :class="ui.header({ class: props.ui?.header })">
+    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div v-if="!!slots.header || (icon || !!slots.leading) || !!slots.body || (title || !!slots.title) || (description || !!slots.description) || !!slots.footer" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+        <div v-if="!!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
           <slot name="header" />
         </div>
 
-        <div v-if="icon || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+        <div v-if="icon || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
           <slot name="leading" :ui="ui">
-            <UIcon v-if="icon" :name="icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+            <UIcon v-if="icon" :name="icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
           </slot>
         </div>
 
-        <div v-if="!!slots.body || (title || !!slots.title) || (description || !!slots.description)" :class="ui.body({ class: props.ui?.body })">
+        <div v-if="!!slots.body || (title || !!slots.title) || (description || !!slots.description)" data-slot="body" :class="ui.body({ class: props.ui?.body })">
           <slot name="body">
-            <div v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+            <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
               <slot name="title">
                 {{ title }}
               </slot>
             </div>
 
-            <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+            <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
               <slot name="description">
                 {{ description }}
               </slot>
@@ -159,7 +160,7 @@ const ariaLabel = computed(() => {
           </slot>
         </div>
 
-        <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+        <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
           <slot name="footer" />
         </div>
       </div>
diff --git a/src/runtime/components/PageFeature.vue b/src/runtime/components/PageFeature.vue
index 0855cdda46..a7b70c7059 100644
--- a/src/runtime/components/PageFeature.vue
+++ b/src/runtime/components/PageFeature.vue
@@ -69,14 +69,14 @@ const ariaLabel = computed(() => {
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
-    <div v-if="icon || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
+    <div v-if="icon || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
       <slot name="leading" :ui="ui">
-        <UIcon v-if="icon" :name="icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        <UIcon v-if="icon" :name="icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
       </slot>
     </div>
 
-    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+    <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
       <ULink
         v-if="to"
         :aria-label="ariaLabel"
@@ -89,13 +89,13 @@ const ariaLabel = computed(() => {
       </ULink>
 
       <slot>
-        <div v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+        <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
             {{ title }}
           </slot>
         </div>
 
-        <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+        <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
           <slot name="description">
             {{ description }}
           </slot>
diff --git a/src/runtime/components/PageHeader.vue b/src/runtime/components/PageHeader.vue
index 75aaeef5be..023753726c 100644
--- a/src/runtime/components/PageHeader.vue
+++ b/src/runtime/components/PageHeader.vue
@@ -51,29 +51,29 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageHeader |
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-if="headline || !!slots.headline" :class="ui.headline({ class: props.ui?.headline })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="headline || !!slots.headline" data-slot="headline" :class="ui.headline({ class: props.ui?.headline })">
       <slot name="headline">
         {{ headline }}
       </slot>
     </div>
 
-    <div :class="ui.container({ class: props.ui?.container })">
-      <div :class="ui.wrapper({ class: props.ui?.wrapper })">
-        <h1 v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+        <h1 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
             {{ title }}
           </slot>
         </h1>
 
-        <div v-if="links?.length || !!slots.links" :class="ui.links({ class: props.ui?.links })">
+        <div v-if="links?.length || !!slots.links" data-slot="links" :class="ui.links({ class: props.ui?.links })">
           <slot name="links">
             <UButton v-for="(link, index) in links" :key="index" color="neutral" variant="outline" v-bind="link" />
           </slot>
         </div>
       </div>
 
-      <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+      <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
         <slot name="description">
           {{ description }}
         </slot>
diff --git a/src/runtime/components/PageHero.vue b/src/runtime/components/PageHero.vue
index c987e8c21b..46bfc8cf98 100644
--- a/src/runtime/components/PageHero.vue
+++ b/src/runtime/components/PageHero.vue
@@ -71,26 +71,26 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageHero ||
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot name="top" />
 
-    <UContainer :class="ui.container({ class: props.ui?.container })">
-      <div v-if="!!slots.header || (headline || !!slots.headline) || (title || !!slots.title) || (description || !!slots.description) || !!slots.body || !!slots.footer || (links?.length || !!slots.links)" :class="ui.wrapper({ class: props.ui?.wrapper })">
-        <div v-if="!!slots.header || (headline || !!slots.headline) || (title || !!slots.title) || (description || !!slots.description)" :class="ui.header({ class: props.ui?.header })">
+    <UContainer data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div v-if="!!slots.header || (headline || !!slots.headline) || (title || !!slots.title) || (description || !!slots.description) || !!slots.body || !!slots.footer || (links?.length || !!slots.links)" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+        <div v-if="!!slots.header || (headline || !!slots.headline) || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
           <slot name="header">
-            <div v-if="headline || !!slots.headline" :class="ui.headline({ class: props.ui?.headline, headline: !slots.headline })">
+            <div v-if="headline || !!slots.headline" data-slot="headline" :class="ui.headline({ class: props.ui?.headline, headline: !slots.headline })">
               <slot name="headline">
                 {{ headline }}
               </slot>
             </div>
 
-            <h1 v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+            <h1 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
               <slot name="title">
                 {{ title }}
               </slot>
             </h1>
 
-            <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+            <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
               <slot name="description">
                 {{ description }}
               </slot>
@@ -98,13 +98,13 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageHero ||
           </slot>
         </div>
 
-        <div v-if="!!slots.body" :class="ui.body({ class: props.ui?.body })">
+        <div v-if="!!slots.body" data-slot="body" :class="ui.body({ class: props.ui?.body })">
           <slot name="body" />
         </div>
 
-        <div v-if="!!slots.footer || (links?.length || !!slots.links)" :class="ui.footer({ class: props.ui?.footer })">
+        <div v-if="!!slots.footer || (links?.length || !!slots.links)" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
           <slot name="footer">
-            <div v-if="links?.length || !!slots.links" :class="ui.links({ class: props.ui?.links })">
+            <div v-if="links?.length || !!slots.links" data-slot="links" :class="ui.links({ class: props.ui?.links })">
               <slot name="links">
                 <UButton v-for="(link, index) in links" :key="index" size="xl" v-bind="link" />
               </slot>
diff --git a/src/runtime/components/PageLinks.vue b/src/runtime/components/PageLinks.vue
index e76441d48a..b84104fbbb 100644
--- a/src/runtime/components/PageLinks.vue
+++ b/src/runtime/components/PageLinks.vue
@@ -61,28 +61,28 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageLinks ||
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <p v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <p v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
       <slot name="title">
         {{ title }}
       </slot>
     </p>
 
-    <ul :class="ui.list({ class: props.ui?.list })">
-      <li v-for="(link, index) in links" :key="index" :class="ui.item({ class: [props.ui?.item, link.ui?.item] })">
+    <ul data-slot="list" :class="ui.list({ class: props.ui?.list })">
+      <li v-for="(link, index) in links" :key="index" data-slot="item" :class="ui.item({ class: [props.ui?.item, link.ui?.item] })">
         <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(link)" custom>
-          <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active })">
+          <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active })">
             <slot name="link" :link="link" :active="active" :ui="ui">
               <slot name="link-leading" :link="link" :active="active" :ui="ui">
-                <UIcon v-if="link.icon" :name="link.icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
+                <UIcon v-if="link.icon" :name="link.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
               </slot>
 
-              <span v-if="link.label || !!slots['link-label']" :class="ui.linkLabel({ class: [props.ui?.linkLabel, link.ui?.linkLabel], active })">
+              <span v-if="link.label || !!slots['link-label']" data-slot="linkLabel" :class="ui.linkLabel({ class: [props.ui?.linkLabel, link.ui?.linkLabel], active })">
                 <slot name="link-label" :link="link" :active="active">
                   {{ link.label }}
                 </slot>
 
-                <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, link.ui?.linkLabelExternalIcon], active })" />
+                <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" data-slot="linkLabelExternalIcon" :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, link.ui?.linkLabelExternalIcon], active })" />
               </span>
 
               <slot name="link-trailing" :link="link" :active="active" />
diff --git a/src/runtime/components/PageLogos.vue b/src/runtime/components/PageLogos.vue
index 06e2a1c9aa..f81a21deeb 100644
--- a/src/runtime/components/PageLogos.vue
+++ b/src/runtime/components/PageLogos.vue
@@ -63,30 +63,33 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageLogos ||
           v-if="typeof item === 'object'"
           :src="item.src"
           :alt="item.alt"
+          data-slot="logo"
           :class="ui.logo({ class: props.ui?.logo })"
         />
         <UIcon
           v-else
           :name="item"
+          data-slot="logo"
           :class="ui.logo({ class: props.ui?.logo })"
         />
       </template>
     </template>
   </DefineCreateItemTemplate>
 
-  <Primitive :as="as" v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <h2 v-if="title" :class="ui.title({ class: props.ui?.title })">
+  <Primitive :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <h2 v-if="title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
       {{ title }}
     </h2>
 
     <UMarquee
       v-if="marquee"
       v-bind="typeof marquee === 'object' ? marquee : {}"
+      data-slot="logos"
       :class="ui.logos({ class: props.ui?.logos, marquee: true })"
     >
       <ReuseCreateItemTemplate :items="items" />
     </UMarquee>
-    <div v-else :class="ui.logos({ class: props.ui?.logos })">
+    <div v-else data-slot="logos" :class="ui.logos({ class: props.ui?.logos })">
       <ReuseCreateItemTemplate :items="items" />
     </div>
   </Primitive>
diff --git a/src/runtime/components/PageSection.vue b/src/runtime/components/PageSection.vue
index 8f6ee05b7c..ca597d99be 100644
--- a/src/runtime/components/PageSection.vue
+++ b/src/runtime/components/PageSection.vue
@@ -90,32 +90,32 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageSection
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot name="top" />
 
-    <UContainer :class="ui.container({ class: props.ui?.container })">
-      <div v-if="!!slots.header || (icon || !!slots.leading) || (headline || !!slots.headline) || (title || !!slots.title) || (description || !!slots.description) || !!slots.body || (features?.length || !!slots.features) || !!slots.footer || (links?.length || !!slots.links)" :class="ui.wrapper({ class: props.ui?.wrapper })">
-        <div v-if="!!slots.header || (icon || !!slots.leading) || (headline || !!slots.headline) || (title || !!slots.title) || (description || !!slots.description)" :class="ui.header({ class: props.ui?.header })">
+    <UContainer data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div v-if="!!slots.header || (icon || !!slots.leading) || (headline || !!slots.headline) || (title || !!slots.title) || (description || !!slots.description) || !!slots.body || (features?.length || !!slots.features) || !!slots.footer || (links?.length || !!slots.links)" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+        <div v-if="!!slots.header || (icon || !!slots.leading) || (headline || !!slots.headline) || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
           <slot name="header">
-            <div v-if="icon || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+            <div v-if="icon || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
               <slot name="leading" :ui="ui">
-                <UIcon v-if="icon" :name="icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+                <UIcon v-if="icon" :name="icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
               </slot>
             </div>
 
-            <div v-if="headline || !!slots.headline" :class="ui.headline({ class: props.ui?.headline, headline: !slots.headline })">
+            <div v-if="headline || !!slots.headline" data-slot="headline" :class="ui.headline({ class: props.ui?.headline, headline: !slots.headline })">
               <slot name="headline">
                 {{ headline }}
               </slot>
             </div>
 
-            <h2 v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+            <h2 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
               <slot name="title">
                 {{ title }}
               </slot>
             </h2>
 
-            <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+            <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
               <slot name="description">
                 {{ description }}
               </slot>
@@ -123,9 +123,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageSection
           </slot>
         </div>
 
-        <div v-if="!!slots.body || (features?.length || !!slots.features)" :class="ui.body({ class: props.ui?.body })">
+        <div v-if="!!slots.body || (features?.length || !!slots.features)" data-slot="body" :class="ui.body({ class: props.ui?.body })">
           <slot name="body">
-            <ul v-if="features?.length || !!slots.features" :class="ui.features({ class: props.ui?.features })">
+            <ul v-if="features?.length || !!slots.features" data-slot="features" :class="ui.features({ class: props.ui?.features })">
               <slot name="features">
                 <UPageFeature
                   v-for="(feature, index) in features"
@@ -138,9 +138,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageSection
           </slot>
         </div>
 
-        <div v-if="!!slots.footer || (links?.length || !!slots.links)" :class="ui.footer({ class: props.ui?.footer })">
+        <div v-if="!!slots.footer || (links?.length || !!slots.links)" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
           <slot name="footer">
-            <div v-if="links?.length || !!slots.links" :class="ui.links({ class: props.ui?.links })">
+            <div v-if="links?.length || !!slots.links" data-slot="links" :class="ui.links({ class: props.ui?.links })">
               <slot name="links">
                 <UButton v-for="(link, index) in links" :key="index" size="lg" v-bind="link" />
               </slot>
diff --git a/src/runtime/components/Pagination.vue b/src/runtime/components/Pagination.vue
index dbe6b511dc..a52ad0fdce 100644
--- a/src/runtime/components/Pagination.vue
+++ b/src/runtime/components/Pagination.vue
@@ -139,21 +139,21 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pagination |
 </script>
 
 <template>
-  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <PaginationList v-slot="{ items }" :class="ui.list({ class: props.ui?.list })">
-      <PaginationFirst v-if="showControls || !!slots.first" as-child :class="ui.first({ class: props.ui?.first })">
+  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <PaginationList v-slot="{ items }" data-slot="list" :class="ui.list({ class: props.ui?.list })">
+      <PaginationFirst v-if="showControls || !!slots.first" as-child data-slot="first" :class="ui.first({ class: props.ui?.first })">
         <slot name="first">
           <UButton :color="color" :variant="variant" :size="size" :icon="firstIcon" :to="to?.(1)" />
         </slot>
       </PaginationFirst>
-      <PaginationPrev v-if="showControls || !!slots.prev" as-child :class="ui.prev({ class: props.ui?.prev })">
+      <PaginationPrev v-if="showControls || !!slots.prev" as-child data-slot="prev" :class="ui.prev({ class: props.ui?.prev })">
         <slot name="prev">
           <UButton :color="color" :variant="variant" :size="size" :icon="prevIcon" :to="page > 1 ? to?.(page - 1) : undefined" />
         </slot>
       </PaginationPrev>
 
       <template v-for="(item, index) in items" :key="index">
-        <PaginationListItem v-if="item.type === 'page'" as-child :value="item.value" :class="ui.item({ class: props.ui?.item })">
+        <PaginationListItem v-if="item.type === 'page'" as-child :value="item.value" data-slot="item" :class="ui.item({ class: props.ui?.item })">
           <slot name="item" v-bind="{ item, index, page, pageCount }">
             <UButton
               :color="page === item.value ? activeColor : color"
@@ -167,19 +167,19 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pagination |
           </slot>
         </PaginationListItem>
 
-        <PaginationEllipsis v-else as-child :class="ui.ellipsis({ class: props.ui?.ellipsis })">
+        <PaginationEllipsis v-else as-child data-slot="ellipsis" :class="ui.ellipsis({ class: props.ui?.ellipsis })">
           <slot name="ellipsis" :ui="ui">
             <UButton as="div" :color="color" :variant="variant" :size="size" :icon="ellipsisIcon || appConfig.ui.icons.ellipsis" />
           </slot>
         </PaginationEllipsis>
       </template>
 
-      <PaginationNext v-if="showControls || !!slots.next" as-child :class="ui.next({ class: props.ui?.next })">
+      <PaginationNext v-if="showControls || !!slots.next" as-child data-slot="next" :class="ui.next({ class: props.ui?.next })">
         <slot name="next">
           <UButton :color="color" :variant="variant" :size="size" :icon="nextIcon" :to="page < pageCount ? to?.(page + 1) : undefined" />
         </slot>
       </PaginationNext>
-      <PaginationLast v-if="showControls || !!slots.last" as-child :class="ui.last({ class: props.ui?.last })">
+      <PaginationLast v-if="showControls || !!slots.last" as-child data-slot="last" :class="ui.last({ class: props.ui?.last })">
         <slot name="last">
           <UButton :color="color" :variant="variant" :size="size" :icon="lastIcon" :to="to?.(pageCount)" />
         </slot>
diff --git a/src/runtime/components/PinInput.vue b/src/runtime/components/PinInput.vue
index f4ed8ca14d..40fed42da1 100644
--- a/src/runtime/components/PinInput.vue
+++ b/src/runtime/components/PinInput.vue
@@ -119,6 +119,7 @@ defineExpose({
     :placeholder="placeholder"
     :model-value="(modelValue as PinInputValue<T>)"
     :default-value="(defaultValue as PinInputValue<T>[])"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="emitFormInput()"
     @complete="onComplete"
@@ -128,6 +129,7 @@ defineExpose({
       :key="ids"
       :ref="el => (inputsRef[index] = el as ComponentPublicInstance)"
       :index="index"
+      data-slot="base"
       :class="ui.base({ class: props.ui?.base })"
       :disabled="disabled"
       @blur="onBlur"
diff --git a/src/runtime/components/Popover.vue b/src/runtime/components/Popover.vue
index 3e58f8f491..7274514de4 100644
--- a/src/runtime/components/Popover.vue
+++ b/src/runtime/components/Popover.vue
@@ -119,10 +119,10 @@ const Component = computed(() => props.mode === 'hover' ? HoverCard : Popover)
     </Component.Anchor>
 
     <Component.Portal v-bind="portalProps">
-      <Component.Content v-bind="contentProps" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-on="contentEvents">
+      <Component.Content v-bind="contentProps" data-slot="content" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-on="contentEvents">
         <slot name="content" v-bind="((close ? { close } : {}) as SlotProps<M>)" />
 
-        <Component.Arrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
+        <Component.Arrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
       </Component.Content>
     </Component.Portal>
   </Component.Root>
diff --git a/src/runtime/components/PricingPlan.vue b/src/runtime/components/PricingPlan.vue
index 090bb9a675..c33f7c65fd 100644
--- a/src/runtime/components/PricingPlan.vue
+++ b/src/runtime/components/PricingPlan.vue
@@ -141,26 +141,26 @@ const features = computed(() => props.features?.map(feature => typeof feature ==
 
 <template>
   <DefinePriceTemplate>
-    <div v-if="discount || price || !!slots.discount || !!slots.price || billingCycle || billingPeriod || !!slots.billing" :class="ui.priceWrapper({ class: props.ui?.priceWrapper })">
-      <div v-if="(discount && price) || !!slots.discount" :class="ui.discount({ class: props.ui?.discount })">
+    <div v-if="discount || price || !!slots.discount || !!slots.price || billingCycle || billingPeriod || !!slots.billing" data-slot="priceWrapper" :class="ui.priceWrapper({ class: props.ui?.priceWrapper })">
+      <div v-if="(discount && price) || !!slots.discount" data-slot="discount" :class="ui.discount({ class: props.ui?.discount })">
         <slot name="discount">
           {{ price }}
         </slot>
       </div>
 
-      <div v-if="(discount || price) || !!slots.price" :class="ui.price({ class: props.ui?.price })">
+      <div v-if="(discount || price) || !!slots.price" data-slot="price" :class="ui.price({ class: props.ui?.price })">
         <slot name="price">
           {{ discount || price }}
         </slot>
       </div>
 
-      <div v-if="billingCycle || billingPeriod || !!slots.billing" :class="ui.billing({ class: props.ui?.billing })">
+      <div v-if="billingCycle || billingPeriod || !!slots.billing" data-slot="billing" :class="ui.billing({ class: props.ui?.billing })">
         <slot name="billing" :ui="ui">
-          <span :class="ui.billingPeriod({ class: props.ui?.billingPeriod })">
+          <span data-slot="billingPeriod" :class="ui.billingPeriod({ class: props.ui?.billingPeriod })">
             {{ billingPeriod || '&nbsp;' }}
           </span>
 
-          <span v-if="billingCycle" :class="ui.billingCycle({ class: props.ui?.billingCycle })">
+          <span v-if="billingCycle" data-slot="billingCycle" :class="ui.billingCycle({ class: props.ui?.billingCycle })">
             {{ billingCycle }}
           </span>
         </slot>
@@ -168,26 +168,33 @@ const features = computed(() => props.features?.map(feature => typeof feature ==
     </div>
   </DefinePriceTemplate>
 
-  <Primitive :as="as" v-bind="$attrs" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-if="!!slots.header && orientation === 'vertical'" :class="ui.header({ class: props.ui?.header })">
+  <Primitive :as="as" v-bind="$attrs" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!slots.header && orientation === 'vertical'" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header" />
     </div>
 
-    <div :class="ui.body({ class: props.ui?.body })">
+    <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
       <slot name="body">
-        <div :class="ui.titleWrapper({ class: props.ui?.titleWrapper })">
-          <div v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+        <div data-slot="titleWrapper" :class="ui.titleWrapper({ class: props.ui?.titleWrapper })">
+          <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
             <slot name="title">
               {{ title }}
             </slot>
           </div>
 
           <slot name="badge" :ui="ui">
-            <UBadge v-if="badge" color="primary" variant="subtle" v-bind="typeof badge === 'string' ? { label: badge } : badge" :class="ui.badge({ class: props.ui?.badge })" />
+            <UBadge
+              v-if="badge"
+              color="primary"
+              variant="subtle"
+              v-bind="typeof badge === 'string' ? { label: badge } : badge"
+              data-slot="badge"
+              :class="ui.badge({ class: props.ui?.badge })"
+            />
           </slot>
         </div>
 
-        <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+        <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
           <slot name="description">
             {{ description }}
           </slot>
@@ -195,21 +202,21 @@ const features = computed(() => props.features?.map(feature => typeof feature ==
 
         <ReusePriceTemplate v-if="orientation === 'vertical'" />
 
-        <ul v-if="features?.length || !!slots.features" :class="ui.features({ class: props.ui?.features })">
+        <ul v-if="features?.length || !!slots.features" data-slot="features" :class="ui.features({ class: props.ui?.features })">
           <slot name="features">
-            <li v-for="(feature, index) in features" :key="index" :class="ui.feature({ class: props.ui?.feature })">
-              <UIcon :name="feature.icon || appConfig.ui.icons.success" :class="ui.featureIcon({ class: props.ui?.featureIcon })" />
+            <li v-for="(feature, index) in features" :key="index" data-slot="feature" :class="ui.feature({ class: props.ui?.feature })">
+              <UIcon :name="feature.icon || appConfig.ui.icons.success" data-slot="featureIcon" :class="ui.featureIcon({ class: props.ui?.featureIcon })" />
 
-              <span :class="ui.featureTitle({ class: props.ui?.featureTitle })">{{ feature.title }}</span>
+              <span data-slot="featureTitle" :class="ui.featureTitle({ class: props.ui?.featureTitle })">{{ feature.title }}</span>
             </li>
           </slot>
         </ul>
       </slot>
     </div>
 
-    <div v-if="(terms || !!slots.terms) || (button || !!slots.button) || orientation === 'horizontal' || (tagline || !!slots.tagline) || !!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+    <div v-if="(terms || !!slots.terms) || (button || !!slots.button) || orientation === 'horizontal' || (tagline || !!slots.tagline) || !!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer">
-        <div v-if="tagline || !!slots.tagline" :class="ui.tagline({ class: props.ui?.tagline })">
+        <div v-if="tagline || !!slots.tagline" data-slot="tagline" :class="ui.tagline({ class: props.ui?.tagline })">
           <slot name="tagline">
             {{ tagline }}
           </slot>
@@ -218,10 +225,10 @@ const features = computed(() => props.features?.map(feature => typeof feature ==
         <ReusePriceTemplate v-if="orientation === 'horizontal'" />
 
         <slot name="button" :ui="ui">
-          <UButton v-if="button" v-bind="{ block: true, size: 'lg', ...button }" :class="ui.button({ class: props.ui?.button })" @click="button?.onClick" />
+          <UButton v-if="button" v-bind="{ block: true, size: 'lg', ...button }" data-slot="button" :class="ui.button({ class: props.ui?.button })" @click="button?.onClick" />
         </slot>
 
-        <div v-if="terms || !!slots.terms" :class="ui.terms({ class: props.ui?.terms })">
+        <div v-if="terms || !!slots.terms" data-slot="terms" :class="ui.terms({ class: props.ui?.terms })">
           <slot name="terms">
             {{ terms }}
           </slot>
diff --git a/src/runtime/components/PricingTable.vue b/src/runtime/components/PricingTable.vue
index f8f5c0671f..88ddd5fc57 100644
--- a/src/runtime/components/PricingTable.vue
+++ b/src/runtime/components/PricingTable.vue
@@ -149,8 +149,8 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
   <DefineTierTemplate v-slot="{ tier }">
     <slot :name="(tier.id as keyof PricingTableSlots<T>)" :tier="(tier as T)">
       <slot name="tier" :tier="(tier as T)">
-        <div :class="ui.tierTitleWrapper({ class: props.ui?.tierTitleWrapper })">
-          <div :class="ui.tierTitle({ class: props.ui?.tierTitle })">
+        <div data-slot="tierTitleWrapper" :class="ui.tierTitleWrapper({ class: props.ui?.tierTitleWrapper })">
+          <div data-slot="tierTitle" :class="ui.tierTitle({ class: props.ui?.tierTitle })">
             <slot :name="(`${tier.id}-title` as keyof PricingTableSlots<T>)" :tier="tier">
               <slot name="tier-title" :tier="(tier as T)">
                 {{ tier.title }}
@@ -165,13 +165,14 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
                 color="primary"
                 variant="subtle"
                 v-bind="typeof tier.badge === 'string' ? { label: tier.badge } : tier.badge"
+                data-slot="tierBadge"
                 :class="ui.tierBadge({ class: props.ui?.tierBadge })"
               />
             </slot>
           </slot>
         </div>
 
-        <div v-if="tier.description || !!slots['tier-description'] || !!slots[(`${tier.id}-description` as keyof PricingTableSlots<T>)]" :class="ui.tierDescription({ class: props.ui?.tierDescription })">
+        <div v-if="tier.description || !!slots['tier-description'] || !!slots[(`${tier.id}-description` as keyof PricingTableSlots<T>)]" data-slot="tierDescription" :class="ui.tierDescription({ class: props.ui?.tierDescription })">
           <slot :name="(`${tier.id}-description` as keyof PricingTableSlots<T>)" :tier="tier">
             <slot name="tier-description" :tier="(tier as T)">
               {{ tier.description }}
@@ -179,8 +180,8 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
           </slot>
         </div>
 
-        <div v-if="tier.discount || tier.price || !!slots['tier-discount'] || !!slots[(`${tier.id}-discount` as keyof PricingTableSlots<T>)] || !!slots['tier-price'] || !!slots[(`${tier.id}-price` as keyof PricingTableSlots<T>)] || tier.billingCycle || tier.billingPeriod || !!slots['tier-billing'] || !!slots[(`${tier.id}-billing` as keyof PricingTableSlots<T>)]" :class="ui.tierPriceWrapper({ class: props.ui?.tierPriceWrapper })">
-          <div v-if="(tier.discount && tier.price) || !!slots[(`${tier.id}-discount` as keyof PricingTableSlots<T>)] || !!slots['tier-discount']" :class="ui.tierDiscount({ class: props.ui?.tierDiscount })">
+        <div v-if="tier.discount || tier.price || !!slots['tier-discount'] || !!slots[(`${tier.id}-discount` as keyof PricingTableSlots<T>)] || !!slots['tier-price'] || !!slots[(`${tier.id}-price` as keyof PricingTableSlots<T>)] || tier.billingCycle || tier.billingPeriod || !!slots['tier-billing'] || !!slots[(`${tier.id}-billing` as keyof PricingTableSlots<T>)]" data-slot="tierPriceWrapper" :class="ui.tierPriceWrapper({ class: props.ui?.tierPriceWrapper })">
+          <div v-if="(tier.discount && tier.price) || !!slots[(`${tier.id}-discount` as keyof PricingTableSlots<T>)] || !!slots['tier-discount']" data-slot="tierDiscount" :class="ui.tierDiscount({ class: props.ui?.tierDiscount })">
             <slot :name="(`${tier.id}-discount` as keyof PricingTableSlots<T>)" :tier="tier">
               <slot name="tier-discount" :tier="(tier as T)">
                 {{ tier.price }}
@@ -188,7 +189,7 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
             </slot>
           </div>
 
-          <div v-if="(tier.discount || tier.price) || !!slots[(`${tier.id}-price` as keyof PricingTableSlots<T>)] || !!slots['tier-price']" :class="ui.tierPrice({ class: props.ui?.tierPrice })">
+          <div v-if="(tier.discount || tier.price) || !!slots[(`${tier.id}-price` as keyof PricingTableSlots<T>)] || !!slots['tier-price']" data-slot="tierPrice" :class="ui.tierPrice({ class: props.ui?.tierPrice })">
             <slot :name="(`${tier.id}-price` as keyof PricingTableSlots<T>)" :tier="tier">
               <slot name="tier-price" :tier="(tier as T)">
                 {{ tier.discount || tier.price }}
@@ -196,14 +197,14 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
             </slot>
           </div>
 
-          <div v-if="tier.billingCycle || tier.billingPeriod || !!slots[(`${tier.id}-billing` as keyof PricingTableSlots<T>)] || !!slots['tier-billing']" :class="ui.tierBilling({ class: props.ui?.tierBilling })">
+          <div v-if="tier.billingCycle || tier.billingPeriod || !!slots[(`${tier.id}-billing` as keyof PricingTableSlots<T>)] || !!slots['tier-billing']" data-slot="tierBilling" :class="ui.tierBilling({ class: props.ui?.tierBilling })">
             <slot :name="(`${tier.id}-billing` as keyof PricingTableSlots<T>)" :tier="tier">
               <slot name="tier-billing" :tier="(tier as T)">
-                <span :class="ui.tierBillingPeriod({ class: props.ui?.tierBillingPeriod })">
+                <span data-slot="tierBillingPeriod" :class="ui.tierBillingPeriod({ class: props.ui?.tierBillingPeriod })">
                   {{ tier.billingPeriod || '&nbsp;' }}
                 </span>
 
-                <span v-if="tier.billingCycle" :class="ui.tierBillingCycle({ class: props.ui?.tierBillingCycle })">
+                <span v-if="tier.billingCycle" data-slot="tierBillingCycle" :class="ui.tierBillingCycle({ class: props.ui?.tierBillingCycle })">
                   {{ tier.billingCycle }}
                 </span>
               </slot>
@@ -211,7 +212,7 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
           </div>
         </div>
 
-        <div v-if="!!slots[(`${tier.id}-button` as keyof PricingTableSlots<T>)] || !!slots['tier-button'] || tier.button" :class="ui.tierButton({ class: props.ui?.tierButton })">
+        <div v-if="!!slots[(`${tier.id}-button` as keyof PricingTableSlots<T>)] || !!slots['tier-button'] || tier.button" data-slot="tierButton" :class="ui.tierButton({ class: props.ui?.tierButton })">
           <slot :name="(`${tier.id}-button` as keyof PricingTableSlots<T>)" :tier="tier">
             <slot name="tier-button" :tier="(tier as T)">
               <UButton v-if="tier.button" block size="lg" v-bind="tier.button" />
@@ -224,31 +225,32 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
 
   <DefineFeatureTemplate v-slot="{ feature, tier }">
     <template v-if="feature.tiers?.[tier.id]">
-      <UIcon v-if="typeof feature.tiers[tier.id] === 'boolean'" :name="appConfig.ui.icons.success" :class="ui.tierFeatureIcon({ class: props.ui?.tierFeatureIcon, active: true })" />
+      <UIcon v-if="typeof feature.tiers[tier.id] === 'boolean'" :name="appConfig.ui.icons.success" data-slot="tierFeatureIcon" :class="ui.tierFeatureIcon({ class: props.ui?.tierFeatureIcon, active: true })" />
       <template v-else>
         {{ feature.tiers[tier.id] }}
       </template>
     </template>
 
-    <UIcon v-else :name="appConfig.ui.icons.minus" :class="ui.tierFeatureIcon({ class: props.ui?.tierFeatureIcon })" />
+    <UIcon v-else :name="appConfig.ui.icons.minus" data-slot="tierFeatureIcon" :class="ui.tierFeatureIcon({ class: props.ui?.tierFeatureIcon })" />
   </DefineFeatureTemplate>
 
-  <Primitive :as="as" v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <table :class="ui.table({ class: props.ui?.table })">
-      <caption v-if="caption || !!slots.caption" :class="ui.caption({ class: [props.ui?.caption] })">
+  <Primitive :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <table data-slot="table" :class="ui.table({ class: props.ui?.table })">
+      <caption v-if="caption || !!slots.caption" data-slot="caption" :class="ui.caption({ class: [props.ui?.caption] })">
         <slot name="caption">
           {{ caption || t('pricingTable.caption') }}
         </slot>
       </caption>
 
-      <thead :class="ui.thead({ class: props.ui?.thead })">
-        <tr :class="ui.tr({ class: props.ui?.tr })">
+      <thead data-slot="thead" :class="ui.thead({ class: props.ui?.thead })">
+        <tr data-slot="tr" :class="ui.tr({ class: props.ui?.tr })">
           <td />
 
           <th
             v-for="(tier, index) in tiers"
             :key="index"
             scope="col"
+            data-slot="tier"
             :class="ui.tier({ class: props.ui?.tier, highlight: tier.highlight })"
           >
             <ReuseTierTemplate :tier="tier" />
@@ -256,11 +258,11 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
         </tr>
       </thead>
 
-      <tbody :class="ui.tbody({ class: props.ui?.tbody })">
+      <tbody data-slot="tbody" :class="ui.tbody({ class: props.ui?.tbody })">
         <template v-for="(section, sectionIndex) in sections" :key="sectionIndex">
-          <tr :class="ui.tr({ class: props.ui?.tr, section: sectionIndex > 0 })">
-            <th scope="row" :class="ui.th({ class: props.ui?.th })">
-              <div v-if="section.title || !!slots['section-title'] || !!slots[(`section-${formatSlotName(section)}-title` as keyof PricingTableSlots<T>)]" :class="ui.sectionTitle({ class: props.ui?.sectionTitle })">
+          <tr data-slot="tr" :class="ui.tr({ class: props.ui?.tr, section: sectionIndex > 0 })">
+            <th scope="row" data-slot="th" :class="ui.th({ class: props.ui?.th })">
+              <div v-if="section.title || !!slots['section-title'] || !!slots[(`section-${formatSlotName(section)}-title` as keyof PricingTableSlots<T>)]" data-slot="sectionTitle" :class="ui.sectionTitle({ class: props.ui?.sectionTitle })">
                 <slot :name="(`section-${formatSlotName(section)}-title` as keyof PricingTableSlots<T>)" :section="section">
                   <slot name="section-title" :section="section">
                     {{ section.title }}
@@ -272,13 +274,14 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
             <td
               v-for="(tier, index) in tiers"
               :key="`${sectionIndex}-tier-${index}`"
+              data-slot="td"
               :class="ui.td({ class: props.ui?.td, highlight: tier.highlight })"
             />
           </tr>
 
           <tr v-for="(feature, featureIndex) in section.features" :key="`${sectionIndex}-feature-${featureIndex}`">
-            <th scope="row" :class="ui.th({ class: props.ui?.th })">
-              <div :class="ui.featureTitle({ class: props.ui?.featureTitle })">
+            <th scope="row" data-slot="th" :class="ui.th({ class: props.ui?.th })">
+              <div data-slot="featureTitle" :class="ui.featureTitle({ class: props.ui?.featureTitle })">
                 <slot :name="(`feature-${formatSlotName(feature)}-title` as keyof PricingTableSlots<T>)" :feature="feature" :section="section">
                   <slot name="feature-title" :feature="feature" :section="section">
                     {{ feature.title }}
@@ -290,9 +293,10 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
             <td
               v-for="(tier, index) in tiers"
               :key="`${sectionIndex}-feature-${featureIndex}-tier-${index}`"
+              data-slot="td"
               :class="ui.td({ class: props.ui?.td, highlight: tier.highlight })"
             >
-              <div :class="ui.featureValue({ class: props.ui?.featureValue })">
+              <div data-slot="featureValue" :class="ui.featureValue({ class: props.ui?.featureValue })">
                 <slot :name="(`feature-${formatSlotName(feature)}-value` as keyof PricingTableSlots<T>)" :feature="feature" :tier="(tier as T)" :section="section">
                   <slot name="feature-value" :feature="feature" :tier="(tier as T)" :section="section">
                     <ReuseFeatureTemplate :tier="tier" :feature="feature" />
@@ -305,12 +309,12 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
       </tbody>
     </table>
 
-    <ul :class="ui.list({ class: props.ui?.list })">
-      <li v-for="(tier, index) in tiers" :key="index" :class="ui.item({ class: props.ui?.item, highlight: tier.highlight })">
+    <ul data-slot="list" :class="ui.list({ class: props.ui?.list })">
+      <li v-for="(tier, index) in tiers" :key="index" data-slot="item" :class="ui.item({ class: props.ui?.item, highlight: tier.highlight })">
         <ReuseTierTemplate :tier="tier" />
 
-        <div v-for="(section, sectionIndex) in sections" :key="`section-${sectionIndex}`" :class="ui.section({ class: props.ui?.section })">
-          <div v-if="section.title" :class="ui.sectionTitle({ class: props.ui?.sectionTitle })">
+        <div v-for="(section, sectionIndex) in sections" :key="`section-${sectionIndex}`" data-slot="section" :class="ui.section({ class: props.ui?.section })">
+          <div v-if="section.title" data-slot="sectionTitle" :class="ui.sectionTitle({ class: props.ui?.sectionTitle })">
             <slot :name="(`section-${formatSlotName(section)}-title` as keyof PricingTableSlots<T>)" :section="section">
               <slot name="section-title" :section="section">
                 {{ section.title }}
@@ -318,8 +322,8 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
             </slot>
           </div>
 
-          <div v-for="(feature, featureIndex) in section.features" :key="`section-${sectionIndex}-feature-${featureIndex}`" :class="ui.feature({ class: props.ui?.feature })">
-            <div :class="ui.featureTitle({ class: props.ui?.featureTitle })">
+          <div v-for="(feature, featureIndex) in section.features" :key="`section-${sectionIndex}-feature-${featureIndex}`" data-slot="feature" :class="ui.feature({ class: props.ui?.feature })">
+            <div data-slot="featureTitle" :class="ui.featureTitle({ class: props.ui?.featureTitle })">
               <slot :name="(`feature-${formatSlotName(feature)}-title` as keyof PricingTableSlots<T>)" :feature="feature" :section="section">
                 <slot name="feature-title" :feature="feature" :section="section">
                   {{ feature.title }}
@@ -327,7 +331,7 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
               </slot>
             </div>
 
-            <div :class="ui.featureValue({ class: props.ui?.featureValue })">
+            <div data-slot="featureValue" :class="ui.featureValue({ class: props.ui?.featureValue })">
               <slot :name="(`feature-${formatSlotName(feature)}-value` as keyof PricingTableSlots<T>)" :feature="feature" :tier="(tier as T)" :section="section">
                 <slot name="feature-value" :feature="feature" :tier="(tier as T)" :section="section">
                   <ReuseFeatureTemplate :tier="tier" :feature="feature" />
diff --git a/src/runtime/components/Progress.vue b/src/runtime/components/Progress.vue
index 388acb9388..a8295c21d2 100644
--- a/src/runtime/components/Progress.vue
+++ b/src/runtime/components/Progress.vue
@@ -166,19 +166,19 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.progress ||
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :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">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!isIndeterminate && (status || !!slots.status)" data-slot="status" :class="ui.status({ class: props.ui?.status })" :style="statusStyle">
       <slot name="status" :percent="percent">
         {{ percent }}%
       </slot>
     </div>
 
-    <ProgressRoot v-bind="rootProps" :max="realMax" :class="ui.base({ class: props.ui?.base })" style="transform: translateZ(0)">
-      <ProgressIndicator :class="ui.indicator({ class: props.ui?.indicator })" :style="indicatorStyle" />
+    <ProgressRoot v-bind="rootProps" :max="realMax" data-slot="base" :class="ui.base({ class: props.ui?.base })" style="transform: translateZ(0)">
+      <ProgressIndicator data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })" :style="indicatorStyle" />
     </ProgressRoot>
 
-    <div v-if="hasSteps" :class="ui.steps({ class: props.ui?.steps })">
-      <div v-for="(step, index) in max" :key="index" :class="ui.step({ class: props.ui?.step, step: stepVariant(index) })">
+    <div v-if="hasSteps" data-slot="steps" :class="ui.steps({ class: props.ui?.steps })">
+      <div v-for="(step, index) in max" :key="index" data-slot="step" :class="ui.step({ class: props.ui?.step, step: stepVariant(index) })">
         <slot :name="`step-${index}`" :step="step">
           {{ step }}
         </slot>
diff --git a/src/runtime/components/RadioGroup.vue b/src/runtime/components/RadioGroup.vue
index 36ee00ced9..816ed99277 100644
--- a/src/runtime/components/RadioGroup.vue
+++ b/src/runtime/components/RadioGroup.vue
@@ -178,35 +178,37 @@ function onUpdate(value: any) {
     :orientation="orientation"
     :name="name"
     :disabled="disabled"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="onUpdate"
   >
-    <fieldset :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">
-      <legend v-if="legend || !!slots.legend" :class="ui.legend({ class: props.ui?.legend })">
+    <fieldset data-slot="fieldset" :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">
+      <legend v-if="legend || !!slots.legend" data-slot="legend" :class="ui.legend({ class: props.ui?.legend })">
         <slot name="legend">
           {{ legend }}
         </slot>
       </legend>
 
-      <component :is="(!variant || variant === 'list') ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })">
-        <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
+      <component :is="(!variant || variant === 'list') ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" data-slot="item" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })">
+        <div data-slot="container" :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
           <RRadioGroupItem
             :id="item.id"
             :value="item.value"
             :disabled="item.disabled"
+            data-slot="base"
             :class="ui.base({ class: [props.ui?.base, item.ui?.base], disabled: item.disabled })"
           >
-            <RadioGroupIndicator :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })" />
+            <RadioGroupIndicator data-slot="indicator" :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })" />
           </RRadioGroupItem>
         </div>
 
-        <div v-if="(item.label || !!slots.label) || (item.description || !!slots.description)" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
-          <component :is="(!variant || variant === 'list') ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
+        <div v-if="(item.label || !!slots.label) || (item.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
+          <component :is="(!variant || variant === 'list') ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
             <slot name="label" :item="item" :model-value="(modelValue as RadioGroupValue)">
               {{ item.label }}
             </slot>
           </component>
-          <p v-if="item.description || !!slots.description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
+          <p v-if="item.description || !!slots.description" data-slot="description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
             <slot name="description" :item="item" :model-value="(modelValue as RadioGroupValue)">
               {{ item.description }}
             </slot>
diff --git a/src/runtime/components/Select.vue b/src/runtime/components/Select.vue
index 878b57dd24..e4cc93b80c 100644
--- a/src/runtime/components/Select.vue
+++ b/src/runtime/components/Select.vue
@@ -275,49 +275,51 @@ defineExpose({
     <SelectTrigger
       :id="id"
       ref="triggerRef"
+      data-slot="base"
       :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" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
         <slot name="leading" :model-value="(modelValue as GetModelValue<T, VK, M>)" :open="open" :ui="ui">
-          <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-          <UAvatar v-else-if="!!avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
+          <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+          <UAvatar v-else-if="!!avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
         </slot>
       </span>
 
       <slot :model-value="(modelValue as GetModelValue<T, VK, M>)" :open="open" :ui="ui">
         <template v-for="displayedModelValue in [displayValue(modelValue as GetModelValue<T, VK, M>)]" :key="displayedModelValue">
-          <span v-if="displayedModelValue !== undefined && displayedModelValue !== null" :class="ui.value({ class: props.ui?.value })">
+          <span v-if="displayedModelValue !== undefined && displayedModelValue !== null" data-slot="value" :class="ui.value({ class: props.ui?.value })">
             {{ displayedModelValue }}
           </span>
-          <span v-else :class="ui.placeholder({ class: props.ui?.placeholder })">
+          <span v-else data-slot="placeholder" :class="ui.placeholder({ class: props.ui?.placeholder })">
             {{ placeholder ?? '&nbsp;' }}
           </span>
         </template>
       </slot>
 
-      <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+      <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
         <slot name="trailing" :model-value="(modelValue as GetModelValue<T, VK, M>)" :open="open" :ui="ui">
-          <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+          <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
         </slot>
       </span>
     </SelectTrigger>
 
     <SelectPortal v-bind="portalProps">
-      <SelectContent :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
+      <SelectContent data-slot="content" :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
         <slot name="content-top" />
 
-        <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
-          <SelectGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
+        <div role="presentation" data-slot="viewport" :class="ui.viewport({ class: props.ui?.viewport })">
+          <SelectGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: props.ui?.group })">
             <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-              <SelectLabel v-if="isSelectItem(item) && item.type === 'label'" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
+              <SelectLabel v-if="isSelectItem(item) && item.type === 'label'" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
                 {{ get(item, props.labelKey as string) }}
               </SelectLabel>
 
-              <SelectSeparator v-else-if="isSelectItem(item) && item.type === 'separator'" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })" />
+              <SelectSeparator v-else-if="isSelectItem(item) && item.type === 'separator'" data-slot="separator" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })" />
 
               <RSelectItem
                 v-else
+                data-slot="item"
                 :class="ui.item({ class: [props.ui?.item, isSelectItem(item) && item.ui?.item, isSelectItem(item) && item.class] })"
                 :disabled="isSelectItem(item) && item.disabled"
                 :value="isSelectItem(item) ? get(item, props.valueKey as string) : item"
@@ -325,37 +327,38 @@ defineExpose({
               >
                 <slot name="item" :item="(item as NestedItem<T>)" :index="index" :ui="ui">
                   <slot name="item-leading" :item="(item as NestedItem<T>)" :index="index" :ui="ui">
-                    <UIcon v-if="isSelectItem(item) && item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
-                    <UAvatar v-else-if="isSelectItem(item) && item.avatar" :size="((item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
+                    <UIcon v-if="isSelectItem(item) && item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
+                    <UAvatar v-else-if="isSelectItem(item) && item.avatar" :size="((item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
                     <UChip
                       v-else-if="isSelectItem(item) && item.chip"
                       :size="((item.ui?.itemLeadingChipSize || props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
                       inset
                       standalone
                       v-bind="item.chip"
+                      data-slot="itemLeadingChip"
                       :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip] })"
                     />
                   </slot>
 
-                  <span :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, isSelectItem(item) && item.ui?.itemWrapper] })">
-                    <SelectItemText :class="ui.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })">
+                  <span data-slot="itemWrapper" :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, isSelectItem(item) && item.ui?.itemWrapper] })">
+                    <SelectItemText data-slot="itemLabel" :class="ui.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })">
                       <slot name="item-label" :item="(item as NestedItem<T>)" :index="index">
                         {{ isSelectItem(item) ? get(item, props.labelKey as string) : item }}
                       </slot>
                     </SelectItemText>
 
-                    <span v-if="isSelectItem(item) && (get(item, props.descriptionKey as string) || !!slots['item-description'])" :class="ui.itemDescription({ class: [props.ui?.itemDescription, isSelectItem(item) && item.ui?.itemDescription] })">
+                    <span v-if="isSelectItem(item) && (get(item, props.descriptionKey as string) || !!slots['item-description'])" data-slot="itemDescription" :class="ui.itemDescription({ class: [props.ui?.itemDescription, isSelectItem(item) && item.ui?.itemDescription] })">
                       <slot name="item-description" :item="(item as NestedItem<T>)" :index="index">
                         {{ get(item, props.descriptionKey as string) }}
                       </slot>
                     </span>
                   </span>
 
-                  <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })">
+                  <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })">
                     <slot name="item-trailing" :item="(item as NestedItem<T>)" :index="index" :ui="ui" />
 
                     <SelectItemIndicator as-child>
-                      <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" />
+                      <UIcon :name="selectedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" />
                     </SelectItemIndicator>
                   </span>
                 </slot>
@@ -366,7 +369,7 @@ defineExpose({
 
         <slot name="content-bottom" />
 
-        <SelectArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
+        <SelectArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
       </SelectContent>
     </SelectPortal>
   </SelectRoot>
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index ee8b9eeeb8..3b14f2df59 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -424,11 +424,12 @@ defineExpose({
 <template>
   <DefineCreateItemTemplate>
     <ComboboxItem
+      data-slot="item"
       :class="ui.item({ class: props.ui?.item })"
       :value="searchTerm"
       @select.prevent="emits('create', searchTerm)"
     >
-      <span :class="ui.itemLabel({ class: props.ui?.itemLabel })">
+      <span data-slot="itemLabel" :class="ui.itemLabel({ class: props.ui?.itemLabel })">
         <slot name="create-item-label" :item="searchTerm">
           {{ t('selectMenu.create', { label: searchTerm }) }}
         </slot>
@@ -437,14 +438,15 @@ defineExpose({
   </DefineCreateItemTemplate>
 
   <DefineItemTemplate v-slot="{ item, index }">
-    <ComboboxLabel v-if="isSelectItem(item) && item.type === 'label'" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
+    <ComboboxLabel v-if="isSelectItem(item) && item.type === 'label'" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
       {{ get(item, props.labelKey as string) }}
     </ComboboxLabel>
 
-    <ComboboxSeparator v-else-if="isSelectItem(item) && item.type === 'separator'" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })" />
+    <ComboboxSeparator v-else-if="isSelectItem(item) && item.type === 'separator'" data-slot="separator" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })" />
 
     <ComboboxItem
       v-else
+      data-slot="item"
       :class="ui.item({ class: [props.ui?.item, isSelectItem(item) && item.ui?.item, isSelectItem(item) && item.class] })"
       :disabled="isSelectItem(item) && item.disabled"
       :value="props.valueKey && isSelectItem(item) ? get(item, props.valueKey as string) : item"
@@ -452,37 +454,38 @@ defineExpose({
     >
       <slot name="item" :item="(item as NestedItem<T>)" :index="index" :ui="ui">
         <slot name="item-leading" :item="(item as NestedItem<T>)" :index="index" :ui="ui">
-          <UIcon v-if="isSelectItem(item) && item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
-          <UAvatar v-else-if="isSelectItem(item) && item.avatar" :size="((item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
+          <UIcon v-if="isSelectItem(item) && item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
+          <UAvatar v-else-if="isSelectItem(item) && item.avatar" :size="((item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
           <UChip
             v-else-if="isSelectItem(item) && item.chip"
             :size="((props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
             inset
             standalone
             v-bind="item.chip"
+            data-slot="itemLeadingChip"
             :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip] })"
           />
         </slot>
 
-        <span :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, isSelectItem(item) && item.ui?.itemWrapper] })">
-          <span :class="ui.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })">
+        <span data-slot="itemWrapper" :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, isSelectItem(item) && item.ui?.itemWrapper] })">
+          <span data-slot="itemLabel" :class="ui.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })">
             <slot name="item-label" :item="(item as NestedItem<T>)" :index="index">
               {{ isSelectItem(item) ? get(item, props.labelKey as string) : item }}
             </slot>
           </span>
 
-          <span v-if="isSelectItem(item) && (get(item, props.descriptionKey as string) || !!slots['item-description'])" :class="ui.itemDescription({ class: [props.ui?.itemDescription, isSelectItem(item) && item.ui?.itemDescription] })">
+          <span v-if="isSelectItem(item) && (get(item, props.descriptionKey as string) || !!slots['item-description'])" data-slot="itemDescription" :class="ui.itemDescription({ class: [props.ui?.itemDescription, isSelectItem(item) && item.ui?.itemDescription] })">
             <slot name="item-description" :item="(item as NestedItem<T>)" :index="index">
               {{ get(item, props.descriptionKey as string) }}
             </slot>
           </span>
         </span>
 
-        <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })">
+        <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })">
           <slot name="item-trailing" :item="(item as NestedItem<T>)" :index="index" :ui="ui" />
 
           <ComboboxItemIndicator as-child>
-            <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" />
+            <UIcon :name="selectedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" />
           </ComboboxItemIndicator>
         </span>
       </slot>
@@ -501,49 +504,56 @@ defineExpose({
     @update:open="onUpdateOpen"
   >
     <ComboboxAnchor as-child>
-      <ComboboxTrigger ref="triggerRef" :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 })">
+      <ComboboxTrigger ref="triggerRef" data-slot="base" :class="ui.base({ class: [props.ui?.base, props.class] })" tabindex="0">
+        <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
           <slot name="leading" :model-value="(modelValue as GetModelValue<T, VK, M>)" :open="open" :ui="ui">
-            <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-            <UAvatar v-else-if="!!avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
+            <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+            <UAvatar v-else-if="!!avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
           </slot>
         </span>
 
         <slot :model-value="(modelValue as GetModelValue<T, VK, M>)" :open="open" :ui="ui">
           <template v-for="displayedModelValue in [displayValue(modelValue as GetModelValue<T, VK, M>)]" :key="displayedModelValue">
-            <span v-if="displayedModelValue !== undefined && displayedModelValue !== null" :class="ui.value({ class: props.ui?.value })">
+            <span v-if="displayedModelValue !== undefined && displayedModelValue !== null" data-slot="value" :class="ui.value({ class: props.ui?.value })">
               {{ displayedModelValue }}
             </span>
-            <span v-else :class="ui.placeholder({ class: props.ui?.placeholder })">
+            <span v-else data-slot="placeholder" :class="ui.placeholder({ class: props.ui?.placeholder })">
               {{ placeholder ?? '&nbsp;' }}
             </span>
           </template>
         </slot>
 
-        <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+        <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
           <slot name="trailing" :model-value="(modelValue as GetModelValue<T, VK, M>)" :open="open" :ui="ui">
-            <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+            <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
           </slot>
         </span>
       </ComboboxTrigger>
     </ComboboxAnchor>
 
     <ComboboxPortal v-bind="portalProps">
-      <ComboboxContent :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
-        <FocusScope trapped :class="ui.focusScope({ class: props.ui?.focusScope })">
+      <ComboboxContent data-slot="content" :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
+        <FocusScope trapped data-slot="focusScope" :class="ui.focusScope({ class: props.ui?.focusScope })">
           <slot name="content-top" />
 
           <ComboboxInput v-if="!!searchInput" v-model="searchTerm" :display-value="() => searchTerm" as-child>
-            <UInput autofocus autocomplete="off" :size="size" v-bind="searchInputProps" :class="ui.input({ class: props.ui?.input })" />
+            <UInput
+              autofocus
+              autocomplete="off"
+              :size="size"
+              v-bind="searchInputProps"
+              data-slot="input"
+              :class="ui.input({ class: props.ui?.input })"
+            />
           </ComboboxInput>
 
-          <ComboboxEmpty :class="ui.empty({ class: props.ui?.empty })">
+          <ComboboxEmpty data-slot="empty" :class="ui.empty({ class: props.ui?.empty })">
             <slot name="empty" :search-term="searchTerm">
               {{ searchTerm ? t('selectMenu.noMatch', { searchTerm }) : t('selectMenu.noData') }}
             </slot>
           </ComboboxEmpty>
 
-          <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+          <div role="presentation" data-slot="viewport" :class="ui.viewport({ class: props.ui?.viewport })">
             <template v-if="!!virtualize">
               <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'top'" />
 
@@ -560,15 +570,15 @@ defineExpose({
             </template>
 
             <template v-else>
-              <ComboboxGroup v-if="createItem && createItemPosition === 'top'" :class="ui.group({ class: props.ui?.group })">
+              <ComboboxGroup v-if="createItem && createItemPosition === 'top'" data-slot="group" :class="ui.group({ class: props.ui?.group })">
                 <ReuseCreateItemTemplate />
               </ComboboxGroup>
 
-              <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
+              <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: props.ui?.group })">
                 <ReuseItemTemplate v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`" :item="item" :index="index" />
               </ComboboxGroup>
 
-              <ComboboxGroup v-if="createItem && createItemPosition === 'bottom'" :class="ui.group({ class: props.ui?.group })">
+              <ComboboxGroup v-if="createItem && createItemPosition === 'bottom'" data-slot="group" :class="ui.group({ class: props.ui?.group })">
                 <ReuseCreateItemTemplate />
               </ComboboxGroup>
             </template>
@@ -577,7 +587,7 @@ defineExpose({
           <slot name="content-bottom" />
         </FocusScope>
 
-        <ComboboxArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
+        <ComboboxArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
       </ComboboxContent>
     </ComboboxPortal>
   </ComboboxRoot>
diff --git a/src/runtime/components/Separator.vue b/src/runtime/components/Separator.vue
index 1dc5337675..557cfaf0b6 100644
--- a/src/runtime/components/Separator.vue
+++ b/src/runtime/components/Separator.vue
@@ -75,19 +75,19 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.separator ||
 </script>
 
 <template>
-  <Separator v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.border({ class: props.ui?.border })" />
+  <Separator v-bind="rootProps" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="border" :class="ui.border({ class: props.ui?.border })" />
 
     <template v-if="label || icon || avatar || !!slots.default">
-      <div :class="ui.container({ class: props.ui?.container })">
+      <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
         <slot :ui="ui">
-          <span v-if="label" :class="ui.label({ class: props.ui?.label })">{{ label }}</span>
-          <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
-          <UAvatar v-else-if="avatar" :size="((props.ui?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+          <span v-if="label" data-slot="label" :class="ui.label({ class: props.ui?.label })">{{ label }}</span>
+          <UIcon v-else-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
+          <UAvatar v-else-if="avatar" :size="((props.ui?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
         </slot>
       </div>
 
-      <div :class="ui.border({ class: props.ui?.border })" />
+      <div data-slot="border" :class="ui.border({ class: props.ui?.border })" />
     </template>
   </Separator>
 </template>
diff --git a/src/runtime/components/Slideover.vue b/src/runtime/components/Slideover.vue
index 5b5ee38db5..9c8ae23883 100644
--- a/src/runtime/components/Slideover.vue
+++ b/src/runtime/components/Slideover.vue
@@ -131,10 +131,11 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.slideover ||
     </DialogTrigger>
 
     <DialogPortal v-bind="portalProps">
-      <DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
+      <DialogOverlay v-if="overlay" data-slot="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
 
       <DialogContent
         :data-side="side"
+        data-slot="content"
         :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
         v-bind="contentProps"
         @after-enter="emits('after:enter')"
@@ -156,16 +157,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.slideover ||
         </VisuallyHidden>
 
         <slot name="content" :close="close">
-          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" :class="ui.header({ class: props.ui?.header })">
+          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
             <slot name="header" :close="close">
-              <div :class="ui.wrapper({ class: props.ui?.wrapper })">
-                <DialogTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+              <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+                <DialogTitle v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
                   <slot name="title">
                     {{ title }}
                   </slot>
                 </DialogTitle>
 
-                <DialogDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+                <DialogDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
                   <slot name="description">
                     {{ description }}
                   </slot>
@@ -183,6 +184,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.slideover ||
                     variant="ghost"
                     :aria-label="t('slideover.close')"
                     v-bind="(typeof props.close === 'object' ? props.close as Partial<ButtonProps> : {})"
+                    data-slot="close"
                     :class="ui.close({ class: props.ui?.close })"
                   />
                 </slot>
@@ -190,11 +192,11 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.slideover ||
             </slot>
           </div>
 
-          <div :class="ui.body({ class: props.ui?.body })">
+          <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
             <slot name="body" :close="close" />
           </div>
 
-          <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+          <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
             <slot name="footer" :close="close" />
           </div>
         </slot>
diff --git a/src/runtime/components/Slider.vue b/src/runtime/components/Slider.vue
index 1e097762d2..76fcbb76ee 100644
--- a/src/runtime/components/Slider.vue
+++ b/src/runtime/components/Slider.vue
@@ -111,13 +111,14 @@ function onChange(value: any) {
     v-model="sliderValue"
     :name="name"
     :disabled="disabled"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :default-value="defaultSliderValue"
     @update:model-value="emitFormInput()"
     @value-commit="onChange"
   >
-    <SliderTrack :class="ui.track({ class: props.ui?.track })">
-      <SliderRange :class="ui.range({ class: props.ui?.range })" />
+    <SliderTrack data-slot="track" :class="ui.track({ class: props.ui?.track })">
+      <SliderRange data-slot="range" :class="ui.range({ class: props.ui?.range })" />
     </SliderTrack>
 
     <template v-for="thumb in thumbs" :key="thumb">
@@ -127,9 +128,9 @@ function onChange(value: any) {
         disable-closing-trigger
         v-bind="(typeof tooltip === 'object' ? tooltip : {})"
       >
-        <SliderThumb :class="ui.thumb({ class: props.ui?.thumb })" />
+        <SliderThumb data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" />
       </UTooltip>
-      <SliderThumb v-else :class="ui.thumb({ class: props.ui?.thumb })" />
+      <SliderThumb v-else data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" />
     </template>
   </SliderRoot>
 </template>
diff --git a/src/runtime/components/Stepper.vue b/src/runtime/components/Stepper.vue
index 3d9d3472e0..7d6ca7b66c 100644
--- a/src/runtime/components/Stepper.vue
+++ b/src/runtime/components/Stepper.vue
@@ -133,20 +133,21 @@ defineExpose({
 </script>
 
 <template>
-  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.header({ class: props.ui?.header })">
+  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <StepperItem
         v-for="(item, count) in items"
         :key="item.value ?? count"
         :step="count"
         :disabled="item.disabled || props.disabled"
+        data-slot="item"
         :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
       >
-        <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
-          <StepperTrigger :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })">
-            <StepperIndicator :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })">
+        <div data-slot="container" :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
+          <StepperTrigger data-slot="trigger" :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })">
+            <StepperIndicator data-slot="indicator" :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })">
               <slot name="indicator" :item="item" :ui="ui">
-                <UIcon v-if="item.icon" :name="item.icon" :class="ui.icon({ class: [props.ui?.icon, item.ui?.icon] })" />
+                <UIcon v-if="item.icon" :name="item.icon" data-slot="icon" :class="ui.icon({ class: [props.ui?.icon, item.ui?.icon] })" />
                 <template v-else>
                   {{ count + 1 }}
                 </template>
@@ -156,17 +157,18 @@ defineExpose({
 
           <StepperSeparator
             v-if="count < items.length - 1"
+            data-slot="separator"
             :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
           />
         </div>
 
-        <div :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
-          <StepperTitle as="div" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })">
+        <div data-slot="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
+          <StepperTitle as="div" data-slot="title" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })">
             <slot name="title" :item="item">
               {{ item.title }}
             </slot>
           </StepperTitle>
-          <StepperDescription as="div" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
+          <StepperDescription as="div" data-slot="description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
             <slot name="description" :item="item">
               {{ item.description }}
             </slot>
@@ -175,7 +177,7 @@ defineExpose({
       </StepperItem>
     </div>
 
-    <div v-if="currentStep?.content || !!slots.content || currentStep?.slot" :class="ui.content({ class: props.ui?.content })">
+    <div v-if="currentStep?.content || !!slots.content || currentStep?.slot" data-slot="content" :class="ui.content({ class: props.ui?.content })">
       <slot
         :name="((currentStep?.slot || 'content') as keyof StepperSlots<T>)"
         :item="(currentStep as Extract<T, { slot: string }>)"
diff --git a/src/runtime/components/Switch.vue b/src/runtime/components/Switch.vue
index 1f7ebbd1c7..9c88acc8a3 100644
--- a/src/runtime/components/Switch.vue
+++ b/src/runtime/components/Switch.vue
@@ -98,33 +98,34 @@ function onUpdate(value: any) {
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.container({ class: props.ui?.container })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
       <SwitchRoot
         :id="id"
         v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
         v-model="modelValue"
         :name="name"
         :disabled="disabled || loading"
+        data-slot="base"
         :class="ui.base({ class: props.ui?.base })"
         @update:model-value="onUpdate"
       >
-        <SwitchThumb :class="ui.thumb({ class: props.ui?.thumb })">
-          <UIcon v-if="loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.icon({ class: props.ui?.icon, checked: true, unchecked: true })" />
+        <SwitchThumb data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })">
+          <UIcon v-if="loading" :name="loadingIcon || appConfig.ui.icons.loading" data-slot="icon" :class="ui.icon({ class: props.ui?.icon, checked: true, unchecked: true })" />
           <template v-else>
-            <UIcon v-if="checkedIcon" :name="checkedIcon" :class="ui.icon({ class: props.ui?.icon, checked: true })" />
-            <UIcon v-if="uncheckedIcon" :name="uncheckedIcon" :class="ui.icon({ class: props.ui?.icon, unchecked: true })" />
+            <UIcon v-if="checkedIcon" :name="checkedIcon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon, checked: true })" />
+            <UIcon v-if="uncheckedIcon" :name="uncheckedIcon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon, unchecked: true })" />
           </template>
         </SwitchThumb>
       </SwitchRoot>
     </div>
-    <div v-if="(label || !!slots.label) || (description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <Label v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
+    <div v-if="(label || !!slots.label) || (description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <Label v-if="label || !!slots.label" :for="id" data-slot="label" :class="ui.label({ class: props.ui?.label })">
         <slot name="label" :label="label">
           {{ label }}
         </slot>
       </Label>
-      <p v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+      <p v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
         <slot name="description" :description="description">
           {{ description }}
         </slot>
diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index b8ddf62ead..4b8d5959e6 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -490,6 +490,7 @@ defineExpose({
       :data-expanded="row.getIsExpanded()"
       :role="props.onSelect ? 'button' : undefined"
       :tabindex="props.onSelect ? 0 : undefined"
+      data-slot="tr"
       :class="ui.tr({
         class: [
           props.ui?.tr,
@@ -508,6 +509,7 @@ defineExpose({
         :data-pinned="cell.column.getIsPinned()"
         :colspan="resolveValue(cell.column.columnDef.meta?.colspan?.td, cell)"
         :rowspan="resolveValue(cell.column.columnDef.meta?.rowspan?.td, cell)"
+        data-slot="td"
         :class="ui.td({
           class: [
             props.ui?.td,
@@ -523,23 +525,23 @@ defineExpose({
       </td>
     </tr>
 
-    <tr v-if="row.getIsExpanded()" :class="ui.tr({ class: [props.ui?.tr] })">
-      <td :colspan="row.getAllCells().length" :class="ui.td({ class: [props.ui?.td] })">
+    <tr v-if="row.getIsExpanded()" data-slot="tr" :class="ui.tr({ class: [props.ui?.tr] })">
+      <td :colspan="row.getAllCells().length" data-slot="td" :class="ui.td({ class: [props.ui?.td] })">
         <slot name="expanded" :row="row" />
       </td>
     </tr>
   </DefineRowTemplate>
 
   <DefineTableTemplate>
-    <table ref="tableRef" :class="ui.base({ class: [props.ui?.base] })">
-      <caption v-if="caption || !!slots.caption" :class="ui.caption({ class: [props.ui?.caption] })">
+    <table ref="tableRef" data-slot="base" :class="ui.base({ class: [props.ui?.base] })">
+      <caption v-if="caption || !!slots.caption" data-slot="caption" :class="ui.caption({ class: [props.ui?.caption] })">
         <slot name="caption">
           {{ caption }}
         </slot>
       </caption>
 
-      <thead :class="ui.thead({ class: [props.ui?.thead] })">
-        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" :class="ui.tr({ class: [props.ui?.tr] })">
+      <thead data-slot="thead" :class="ui.thead({ class: [props.ui?.thead] })">
+        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" data-slot="tr" :class="ui.tr({ class: [props.ui?.tr] })">
           <th
             v-for="header in headerGroup.headers"
             :key="header.id"
@@ -547,6 +549,7 @@ defineExpose({
             :scope="header.colSpan > 1 ? 'colgroup' : 'col'"
             :colspan="header.colSpan > 1 ? header.colSpan : undefined"
             :rowspan="header.rowSpan > 1 ? header.rowSpan : undefined"
+            data-slot="th"
             :class="ui.th({
               class: [
                 props.ui?.th,
@@ -562,10 +565,10 @@ defineExpose({
           </th>
         </tr>
 
-        <tr :class="ui.separator({ class: [props.ui?.separator] })" />
+        <tr data-slot="separator" :class="ui.separator({ class: [props.ui?.separator] })" />
       </thead>
 
-      <tbody :class="ui.tbody({ class: [props.ui?.tbody] })">
+      <tbody data-slot="tbody" :class="ui.tbody({ class: [props.ui?.tbody] })">
         <slot name="body-top" />
 
         <template v-if="rows.length">
@@ -587,13 +590,13 @@ defineExpose({
         </template>
 
         <tr v-else-if="loading && !!slots['loading']">
-          <td :colspan="tableApi.getAllLeafColumns().length" :class="ui.loading({ class: props.ui?.loading })">
+          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="loading" :class="ui.loading({ class: props.ui?.loading })">
             <slot name="loading" />
           </td>
         </tr>
 
         <tr v-else>
-          <td :colspan="tableApi.getAllLeafColumns().length" :class="ui.empty({ class: props.ui?.empty })">
+          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="empty" :class="ui.empty({ class: props.ui?.empty })">
             <slot name="empty">
               {{ empty || t('table.noData') }}
             </slot>
@@ -605,20 +608,22 @@ defineExpose({
 
       <tfoot
         v-if="hasFooter"
+        data-slot="tfoot"
         :class="ui.tfoot({ class: [props.ui?.tfoot] })"
         :style="virtualizer ? {
           transform: `translateY(${virtualizer.getTotalSize() - virtualizer.getVirtualItems().length * virtualizerProps.estimateSize}px)`
         } : undefined"
       >
-        <tr :class="ui.separator({ class: [props.ui?.separator] })" />
+        <tr data-slot="separator" :class="ui.separator({ class: [props.ui?.separator] })" />
 
-        <tr v-for="footerGroup in tableApi.getFooterGroups()" :key="footerGroup.id" :class="ui.tr({ class: [props.ui?.tr] })">
+        <tr v-for="footerGroup in tableApi.getFooterGroups()" :key="footerGroup.id" data-slot="tr" :class="ui.tr({ class: [props.ui?.tr] })">
           <th
             v-for="header in footerGroup.headers"
             :key="header.id"
             :data-pinned="header.column.getIsPinned()"
             :colspan="header.colSpan > 1 ? header.colSpan : undefined"
             :rowspan="header.rowSpan > 1 ? header.rowSpan : undefined"
+            data-slot="th"
             :class="ui.th({
               class: [
                 props.ui?.th,
@@ -637,7 +642,7 @@ defineExpose({
     </table>
   </DefineTableTemplate>
 
-  <Primitive ref="rootRef" :as="as" v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive ref="rootRef" :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div
       v-if="virtualizer"
       :style="{
diff --git a/src/runtime/components/Tabs.vue b/src/runtime/components/Tabs.vue
index 6f3de2f4a8..d66cf2acfd 100644
--- a/src/runtime/components/Tabs.vue
+++ b/src/runtime/components/Tabs.vue
@@ -131,10 +131,11 @@ defineExpose({
     :default-value="defaultValue"
     :orientation="orientation"
     :activation-mode="activationMode"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
   >
-    <TabsList :class="ui.list({ class: props.ui?.list })">
-      <TabsIndicator :class="ui.indicator({ class: props.ui?.indicator })" />
+    <TabsList data-slot="list" :class="ui.list({ class: props.ui?.list })">
+      <TabsIndicator data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })" />
 
       <slot name="list-leading" />
 
@@ -144,14 +145,15 @@ defineExpose({
         :ref="el => (triggersRef[index] = el as ComponentPublicInstance)"
         :value="item.value ?? String(index)"
         :disabled="item.disabled"
+        data-slot="trigger"
         :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"
       >
         <slot name="leading" :item="item" :index="index" :ui="ui">
-          <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })" />
-          <UAvatar v-else-if="item.avatar" :size="((item.ui?.leadingAvatarSize || props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.leadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.leadingAvatar] })" />
+          <UIcon v-if="item.icon" :name="item.icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })" />
+          <UAvatar v-else-if="item.avatar" :size="((item.ui?.leadingAvatarSize || props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.leadingAvatar] })" />
         </slot>
 
-        <span v-if="get(item, props.labelKey as string) || !!slots.default" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
+        <span v-if="get(item, props.labelKey as string) || !!slots.default" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
           <slot :item="item" :index="index">{{ get(item, props.labelKey as string) }}</slot>
         </span>
 
@@ -162,6 +164,7 @@ defineExpose({
             variant="outline"
             :size="((item.ui?.trailingBadgeSize || props.ui?.trailingBadgeSize || ui.trailingBadgeSize()) as BadgeProps['size'])"
             v-bind="(typeof item.badge === 'string' || typeof item.badge === 'number') ? { label: item.badge } : item.badge"
+            data-slot="trailingBadge"
             :class="ui.trailingBadge({ class: [props.ui?.trailingBadge, item.ui?.trailingBadge] })"
           />
         </slot>
@@ -171,7 +174,7 @@ defineExpose({
     </TabsList>
 
     <template v-if="!!content">
-      <TabsContent v-for="(item, index) of items" :key="index" :value="item.value ?? String(index)" :class="ui.content({ class: [props.ui?.content, item.ui?.content, item.class] })">
+      <TabsContent v-for="(item, index) of items" :key="index" :value="item.value ?? String(index)" data-slot="content" :class="ui.content({ class: [props.ui?.content, item.ui?.content, item.class] })">
         <slot :name="((item.slot || 'content') as keyof TabsSlots<T>)" :item="(item as Extract<T, { slot: string; }>)" :index="index" :ui="ui">
           {{ item.content }}
         </slot>
diff --git a/src/runtime/components/Textarea.vue b/src/runtime/components/Textarea.vue
index 0feacbdeab..60ef034c15 100644
--- a/src/runtime/components/Textarea.vue
+++ b/src/runtime/components/Textarea.vue
@@ -205,7 +205,7 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <textarea
       :id="id"
       ref="textareaRef"
@@ -213,6 +213,7 @@ defineExpose({
       :name="name"
       :rows="rows"
       :placeholder="placeholder"
+      data-slot="base"
       :class="ui.base({ class: props.ui?.base })"
       :disabled="disabled"
       :required="required"
@@ -225,16 +226,16 @@ defineExpose({
 
     <slot :ui="ui" />
 
-    <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+    <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
       <slot name="leading" :ui="ui">
-        <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 })" />
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
       </slot>
     </span>
 
-    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
       <slot name="trailing" :ui="ui">
-        <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>
   </Primitive>
diff --git a/src/runtime/components/Timeline.vue b/src/runtime/components/Timeline.vue
index 213656441d..15ca739c67 100644
--- a/src/runtime/components/Timeline.vue
+++ b/src/runtime/components/Timeline.vue
@@ -108,37 +108,46 @@ function getItemState(index: number): 'active' | 'completed' | undefined {
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div
       v-for="(item, index) in items"
       :key="item.value ?? index"
+      data-slot="item"
       :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
       :data-state="getItemState(index)"
     >
-      <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
-        <UAvatar :size="size" :icon="item.icon" v-bind="typeof item.avatar === 'object' ? item.avatar : {}" :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })" :ui="{ icon: 'text-inherit', fallback: 'text-inherit' }">
+      <div data-slot="container" :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
+        <UAvatar
+          :size="size"
+          :icon="item.icon"
+          v-bind="typeof item.avatar === 'object' ? item.avatar : {}"
+          data-slot="indicator"
+          :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })"
+          :ui="{ icon: 'text-inherit', fallback: 'text-inherit' }"
+        >
           <slot :name="((item.slot ? `${item.slot}-indicator` : 'indicator') as keyof TimelineSlots<T>)" :item="(item as Extract<T, { slot: string; }>)" />
         </UAvatar>
 
         <Separator
           v-if="index < items.length - 1"
+          data-slot="separator"
           :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
           :orientation="props.orientation"
         />
       </div>
 
-      <div :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
-        <div v-if="item.date" :class="ui.date({ class: [props.ui?.date, item.ui?.date] })">
+      <div data-slot="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
+        <div v-if="item.date" data-slot="date" :class="ui.date({ class: [props.ui?.date, item.ui?.date] })">
           <slot :name="((item.slot ? `${item.slot}-date` : 'date') as keyof TimelineSlots<T>)" :item="(item as Extract<T, { slot: string; }>)">
             {{ item.date }}
           </slot>
         </div>
-        <div v-if="item.title || !!slots.title" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })">
+        <div v-if="item.title || !!slots.title" data-slot="title" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })">
           <slot :name="((item.slot ? `${item.slot}-title` : 'title') as keyof TimelineSlots<T>)" :item="(item as Extract<T, { slot: string; }>)">
             {{ item.title }}
           </slot>
         </div>
-        <div v-if="item.description || !!slots.description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
+        <div v-if="item.description || !!slots.description" data-slot="description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
           <slot :name="((item.slot ? `${item.slot}-description` : 'description') as keyof TimelineSlots<T>)" :item="(item as Extract<T, { slot: string; }>)">
             {{ item.description }}
           </slot>
diff --git a/src/runtime/components/Toast.vue b/src/runtime/components/Toast.vue
index 818bdd50ec..b86daaad53 100644
--- a/src/runtime/components/Toast.vue
+++ b/src/runtime/components/Toast.vue
@@ -125,16 +125,17 @@ defineExpose({
     v-slot="{ remaining, duration, open }"
     v-bind="rootProps"
     :data-orientation="orientation"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="{ '--height': height }"
   >
     <slot name="leading" :ui="ui">
-      <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 })" />
+      <UAvatar v-if="avatar" :size="((props.ui?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+      <UIcon v-else-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
     </slot>
 
-    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <ToastTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+    <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <ToastTitle v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
         <slot name="title">
           <component :is="title()" v-if="typeof title === 'function'" />
           <component :is="title" v-else-if="typeof title === 'object'" />
@@ -143,7 +144,7 @@ defineExpose({
           </template>
         </slot>
       </ToastTitle>
-      <ToastDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+      <ToastDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
         <slot name="description">
           <component :is="description()" v-if="typeof description === 'function'" />
           <component :is="description" v-else-if="typeof description === 'object'" />
@@ -153,7 +154,7 @@ defineExpose({
         </slot>
       </ToastDescription>
 
-      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" :class="ui.actions({ class: props.ui?.actions })">
+      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
         <slot name="actions">
           <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
             <UButton size="xs" :color="color" v-bind="action" />
@@ -162,7 +163,7 @@ defineExpose({
       </div>
     </div>
 
-    <div v-if="(orientation === 'horizontal' && (actions?.length || !!slots.actions)) || close" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })">
+    <div v-if="(orientation === 'horizontal' && (actions?.length || !!slots.actions)) || close" data-slot="actions" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })">
       <template v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions)">
         <slot name="actions">
           <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
@@ -180,6 +181,7 @@ defineExpose({
             variant="link"
             :aria-label="t('toast.close')"
             v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
+            data-slot="close"
             :class="ui.close({ class: props.ui?.close })"
             @click.stop
           />
@@ -193,6 +195,7 @@ defineExpose({
       :color="color"
       v-bind="(typeof progress === 'object' ? progress as Partial<ProgressProps> : {})"
       size="sm"
+      data-slot="progress"
       :class="ui.progress({ class: props.ui?.progress })"
     />
   </ToastRoot>
diff --git a/src/runtime/components/Toaster.vue b/src/runtime/components/Toaster.vue
index f37d32efc9..66c56adcf1 100644
--- a/src/runtime/components/Toaster.vue
+++ b/src/runtime/components/Toaster.vue
@@ -136,6 +136,7 @@ function getOffset(index: number) {
         '--translate': expanded ? 'calc(var(--offset) * var(--translate-factor))' : 'calc(var(--before) * var(--gap))',
         '--transform': 'translateY(var(--translate)) scale(var(--scale))'
       }"
+      data-slot="base"
       :class="ui.base({ class: [props.ui?.base, toast.onClick ? 'cursor-pointer' : undefined] })"
       @update:open="onUpdateOpen($event, toast.id)"
       @click="toast.onClick && toast.onClick(toast)"
@@ -144,6 +145,7 @@ function getOffset(index: number) {
     <ToastPortal v-bind="portalProps">
       <ToastViewport
         :data-expanded="expanded"
+        data-slot="viewport"
         :class="ui.viewport({ class: [props.ui?.viewport, props.class] })"
         :style="{
           '--scale-factor': '0.05',
diff --git a/src/runtime/components/Tooltip.vue b/src/runtime/components/Tooltip.vue
index df4e127ffa..d10a0598f6 100644
--- a/src/runtime/components/Tooltip.vue
+++ b/src/runtime/components/Tooltip.vue
@@ -82,16 +82,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.tooltip || {
     </TooltipTrigger>
 
     <TooltipPortal v-bind="portalProps">
-      <TooltipContent v-bind="contentProps" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })">
+      <TooltipContent v-bind="contentProps" data-slot="content" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })">
         <slot name="content" :ui="ui">
-          <span v-if="text" :class="ui.text({ class: props.ui?.text })">{{ text }}</span>
+          <span v-if="text" data-slot="text" :class="ui.text({ class: props.ui?.text })">{{ text }}</span>
 
-          <span v-if="kbds?.length" :class="ui.kbds({ class: props.ui?.kbds })">
+          <span v-if="kbds?.length" data-slot="kbds" :class="ui.kbds({ class: props.ui?.kbds })">
             <UKbd v-for="(kbd, index) in kbds" :key="index" :size="((props.ui?.kbdsSize || ui.kbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
           </span>
         </slot>
 
-        <TooltipArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
+        <TooltipArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
       </TooltipContent>
     </TooltipPortal>
   </TooltipRoot>
diff --git a/src/runtime/components/Tree.vue b/src/runtime/components/Tree.vue
index 97c4f45147..cc348412b7 100644
--- a/src/runtime/components/Tree.vue
+++ b/src/runtime/components/Tree.vue
@@ -273,6 +273,7 @@ defineExpose({
             :is="as.link"
             :type="as.link === 'button' ? 'button' : undefined"
             :disabled="item.disabled || disabled"
+            data-slot="link"
             :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || disabled })"
             :style="!nested && level > 1 ? { paddingLeft: flattenedPaddingFormula(level) } : undefined"
           >
@@ -289,17 +290,20 @@ defineExpose({
                 <UIcon
                   v-if="item.icon"
                   :name="item.icon"
+                  data-slot="linkLeadingIcon"
                   :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
                 />
                 <UIcon
                   v-else-if="item.children?.length"
                   :name="isExpanded ? (expandedIcon ?? appConfig.ui.icons.folderOpen) : (collapsedIcon ?? appConfig.ui.icons.folder)"
+                  data-slot="linkLeadingIcon"
                   :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
                 />
               </slot>
 
               <span
                 v-if="getItemLabel(item) || !!slots[(item.slot ? `${item.slot}-label`: 'item-label') as keyof TreeSlots<T>]"
+                data-slot="linkLabel"
                 :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })"
               >
                 <slot
@@ -313,6 +317,7 @@ defineExpose({
 
               <span
                 v-if="item.trailingIcon || item.children?.length || !!slots[(item.slot ? `${item.slot}-trailing`: 'item-trailing') as keyof TreeSlots<T>]"
+                data-slot="linkTrailing"
                 :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })"
               >
                 <slot
@@ -323,11 +328,13 @@ defineExpose({
                   <UIcon
                     v-if="item.trailingIcon"
                     :name="item.trailingIcon"
+                    data-slot="linkTrailingIcon"
                     :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
                   />
                   <UIcon
                     v-else-if="item.children?.length"
                     :name="trailingIcon ?? appConfig.ui.icons.chevronDown"
+                    data-slot="linkTrailingIcon"
                     :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
                   />
                 </slot>
@@ -339,6 +346,7 @@ defineExpose({
         <ul
           v-if="nested && item.children?.length && isExpanded"
           role="group"
+          data-slot="listWithChildren"
           :class="ui.listWithChildren({ class: [props.ui?.listWithChildren, item.ui?.listWithChildren] })"
         >
           <ReuseTreeTemplate :items="item.children" :level="level + 1" />
@@ -358,6 +366,7 @@ defineExpose({
     :as="as.root"
     :model-value="modelValue"
     :default-value="defaultValue"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :get-key="getItemKey"
     :default-expanded="defaultExpanded"
diff --git a/src/runtime/components/User.vue b/src/runtime/components/User.vue
index afad843152..40ff41df9c 100644
--- a/src/runtime/components/User.vue
+++ b/src/runtime/components/User.vue
@@ -66,15 +66,22 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.user || {})
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
     <slot name="avatar" :ui="ui">
       <UChip v-if="chip && avatar" inset v-bind="typeof chip === 'object' ? chip : {}" :size="size">
-        <UAvatar :alt="name" v-bind="avatar" :size="size" :class="ui.avatar({ class: props.ui?.avatar })" />
+        <UAvatar :alt="name" v-bind="avatar" :size="size" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
       </UChip>
-      <UAvatar v-else-if="avatar" :alt="name" v-bind="avatar" :size="size" :class="ui.avatar({ class: props.ui?.avatar })" />
+      <UAvatar
+        v-else-if="avatar"
+        :alt="name"
+        v-bind="avatar"
+        :size="size"
+        data-slot="avatar"
+        :class="ui.avatar({ class: props.ui?.avatar })"
+      />
     </slot>
 
-    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+    <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
       <ULink
         v-if="to"
         :aria-label="name"
@@ -87,12 +94,12 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.user || {})
       </ULink>
 
       <slot>
-        <p v-if="name || !!slots.name" :class="ui.name({ class: props.ui?.name })">
+        <p v-if="name || !!slots.name" data-slot="name" :class="ui.name({ class: props.ui?.name })">
           <slot name="name">
             {{ name }}
           </slot>
         </p>
-        <p v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+        <p v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
           <slot name="description">
             {{ description }}
           </slot>
diff --git a/src/runtime/components/content/ContentNavigation.vue b/src/runtime/components/content/ContentNavigation.vue
index 572fee604a..3dadea5584 100644
--- a/src/runtime/components/content/ContentNavigation.vue
+++ b/src/runtime/components/content/ContentNavigation.vue
@@ -166,18 +166,18 @@ const defaultValue = computed(() => {
   <DefineLinkTemplate v-slot="{ link, active }">
     <slot name="link" :link="(link as T)" :active="active" :ui="ui">
       <slot name="link-leading" :link="(link as T)" :active="active" :ui="ui">
-        <UIcon v-if="link.icon" :name="link.icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
+        <UIcon v-if="link.icon" :name="link.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
       </slot>
 
-      <span v-if="link.title || !!slots['link-title']" :class="ui.linkTitle({ class: [props.ui?.linkTitle, link.ui?.linkTitle], active })">
+      <span v-if="link.title || !!slots['link-title']" data-slot="linkTitle" :class="ui.linkTitle({ class: [props.ui?.linkTitle, link.ui?.linkTitle], active })">
         <slot name="link-title" :link="(link as T)" :active="active" :ui="ui">
           {{ link.title }}
         </slot>
 
-        <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.linkTitleExternalIcon({ class: [props.ui?.linkTitleExternalIcon, link.ui?.linkTitleExternalIcon], active })" />
+        <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" data-slot="linkTitleExternalIcon" :class="ui.linkTitleExternalIcon({ class: [props.ui?.linkTitleExternalIcon, link.ui?.linkTitleExternalIcon], active })" />
       </span>
 
-      <span v-if="(link.badge || link.badge === 0) || (link.children?.length && !disabled) || link.trailingIcon || !!slots['link-trailing']" :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, link.ui?.linkTrailing] })">
+      <span v-if="(link.badge || link.badge === 0) || (link.children?.length && !disabled) || link.trailingIcon || !!slots['link-trailing']" data-slot="linkTrailing" :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, link.ui?.linkTrailing] })">
         <slot name="link-trailing" :link="(link as T)" :active="active" :ui="ui">
           <UBadge
             v-if="link.badge || link.badge === 0"
@@ -185,19 +185,20 @@ const defaultValue = computed(() => {
             variant="outline"
             :size="((props.ui?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()) as BadgeProps['size'])"
             v-bind="(typeof link.badge === 'string' || typeof link.badge === 'number') ? { label: link.badge } : link.badge"
+            data-slot="linkTrailingBadge"
             :class="ui.linkTrailingBadge({ class: props.ui?.linkTrailingBadge })"
           />
-          <UIcon v-if="link.children?.length && !disabled" :name="link.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, link.ui?.linkTrailingIcon] })" />
-          <UIcon v-else-if="link.trailingIcon" :name="link.trailingIcon" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, link.ui?.linkTrailingIcon] })" />
+          <UIcon v-if="link.children?.length && !disabled" :name="link.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" data-slot="linkTrailingIcon" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, link.ui?.linkTrailingIcon] })" />
+          <UIcon v-else-if="link.trailingIcon" :name="link.trailingIcon" data-slot="linkTrailingIcon" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, link.ui?.linkTrailingIcon] })" />
         </slot>
       </span>
     </slot>
   </DefineLinkTemplate>
 
-  <Primitive :as="as" v-bind="$attrs" :as-child="level > 0" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" v-bind="$attrs" :as-child="level > 0" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <AccordionRoot as="ul" :disabled="disabled" v-bind="rootProps" :default-value="defaultValue" :class="level > 0 ? ui.listWithChildren({ class: props.ui?.listWithChildren }) : ui.list({ class: props.ui?.list })">
       <template v-for="(link, index) in navigation" :key="index">
-        <AccordionItem v-if="link.children?.length" as="li" :class="ui.itemWithChildren({ class: [props.ui?.itemWithChildren, link.ui?.itemWithChildren], level: level > 0 })" :value="String(index)">
+        <AccordionItem v-if="link.children?.length" as="li" data-slot="itemWithChildren" :class="ui.itemWithChildren({ class: [props.ui?.itemWithChildren, link.ui?.itemWithChildren], level: level > 0 })" :value="String(index)">
           <AccordionTrigger
             as="button"
             :class="[
@@ -208,7 +209,7 @@ const defaultValue = computed(() => {
             <ReuseLinkTemplate :link="link" :active="link.active" />
           </AccordionTrigger>
 
-          <AccordionContent :class="ui.content({ class: [props.ui?.content, link.ui?.content] })">
+          <AccordionContent data-slot="content" :class="ui.content({ class: [props.ui?.content, link.ui?.content] })">
             <UContentNavigation
               v-bind="rootProps"
               :navigation="link.children"
@@ -228,9 +229,9 @@ const defaultValue = computed(() => {
           </AccordionContent>
         </AccordionItem>
 
-        <li v-else :class="ui.item({ class: [props.ui?.item, link.ui?.item], level: level > 0 })">
+        <li v-else data-slot="item" :class="ui.item({ class: [props.ui?.item, link.ui?.item], level: level > 0 })">
           <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(mapContentNavigationItem(link))" custom>
-            <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active, disabled: !!link.disabled, level: level > 0 })">
+            <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active, disabled: !!link.disabled, level: level > 0 })">
               <ReuseLinkTemplate :link="link" :active="active" />
             </ULinkBase>
           </ULink>
diff --git a/src/runtime/components/content/ContentSearch.vue b/src/runtime/components/content/ContentSearch.vue
index 1f6bcd8fdc..5bbef7ee81 100644
--- a/src/runtime/components/content/ContentSearch.vue
+++ b/src/runtime/components/content/ContentSearch.vue
@@ -267,6 +267,7 @@ defineExpose({
     :title="title || t('contentSearch.title')"
     :description="description || t('contentSearch.description')"
     v-bind="modalProps"
+    data-slot="modal"
     :class="ui.modal({ class: [props.ui?.modal, props.class] })"
   >
     <template #content="contentData">
diff --git a/src/runtime/components/content/ContentSearchButton.vue b/src/runtime/components/content/ContentSearchButton.vue
index 33b76f8a88..d9d165b82b 100644
--- a/src/runtime/components/content/ContentSearchButton.vue
+++ b/src/runtime/components/content/ContentSearchButton.vue
@@ -112,7 +112,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.contentSearc
       </template>
 
       <template v-if="!collapsed" #trailing="{ ui: uiProxy }">
-        <div :class="ui.trailing({ class: props.ui?.trailing })">
+        <div data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
           <slot name="trailing" :ui="uiProxy">
             <template v-if="kbds?.length">
               <UKbd v-for="(kbd, index) in kbds" :key="index" variant="subtle" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
diff --git a/src/runtime/components/content/ContentSurround.vue b/src/runtime/components/content/ContentSurround.vue
index f55c07554a..2010ede221 100644
--- a/src/runtime/components/content/ContentSurround.vue
+++ b/src/runtime/components/content/ContentSurround.vue
@@ -81,21 +81,21 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.contentSurro
 
 <template>
   <DefineLinkTemplate v-slot="{ link, icon, direction }">
-    <ULink v-if="link" :to="link.path" raw :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], direction })">
+    <ULink v-if="link" :to="link.path" raw data-slot="link" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], direction })">
       <slot name="link" :link="(link as T)" :ui="ui">
-        <div :class="ui.linkLeading({ class: [props.ui?.linkLeading, link.ui?.linkLeading] })">
+        <div data-slot="linkLeading" :class="ui.linkLeading({ class: [props.ui?.linkLeading, link.ui?.linkLeading] })">
           <slot name="link-leading" :link="(link as T)" :ui="ui">
-            <UIcon :name="link.icon || icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], direction })" />
+            <UIcon :name="link.icon || icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], direction })" />
           </slot>
         </div>
 
-        <p :class="ui.linkTitle({ class: [props.ui?.linkTitle, link.ui?.linkTitle] })">
+        <p data-slot="linkTitle" :class="ui.linkTitle({ class: [props.ui?.linkTitle, link.ui?.linkTitle] })">
           <slot name="link-title" :link="(link as T)" :ui="ui">
             {{ link.title }}
           </slot>
         </p>
 
-        <p :class="ui.linkDescription({ class: [props.ui?.linkDescription, link.ui?.linkDescription] })">
+        <p data-slot="linkDescription" :class="ui.linkDescription({ class: [props.ui?.linkDescription, link.ui?.linkDescription] })">
           <slot name="link-description" :link="(link as T)" :ui="ui">
             {{ link.description }}
           </slot>
@@ -105,7 +105,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.contentSurro
     <span v-else class="hidden lg:block">&nbsp;</span>
   </DefineLinkTemplate>
 
-  <Primitive v-if="surround" :as="as" v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive v-if="surround" :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <ReuseLinkTemplate :link="surround[0]" :icon="prevIcon || appConfig.ui.icons.arrowLeft" direction="left" />
     <ReuseLinkTemplate :link="surround[1]" :icon="nextIcon || appConfig.ui.icons.arrowRight" direction="right" />
   </Primitive>
diff --git a/src/runtime/components/content/ContentToc.vue b/src/runtime/components/content/ContentToc.vue
index 90cc3477e6..f6610aef5d 100644
--- a/src/runtime/components/content/ContentToc.vue
+++ b/src/runtime/components/content/ContentToc.vue
@@ -147,9 +147,9 @@ nuxtApp.hooks.hook('page:transition:finish', () => {
   <DefineListTemplate v-slot="{ links, level }">
     <ul :class="level > 0 ? ui.listWithChildren({ class: props.ui?.listWithChildren }) : ui.list({ class: props.ui?.list })">
       <li v-for="(link, index) in links" :key="index" :class="link.children && link.children.length > 0 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, link.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, link.ui?.item] })">
-        <a :href="`#${link.id}`" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active: activeHeadings.includes(link.id) })" @click.prevent="scrollToHeading(link.id)">
+        <a :href="`#${link.id}`" data-slot="link" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active: activeHeadings.includes(link.id) })" @click.prevent="scrollToHeading(link.id)">
           <slot name="link" :link="link">
-            <span :class="ui.linkText({ class: [props.ui?.linkText, link.ui?.linkText] })">
+            <span data-slot="linkText" :class="ui.linkText({ class: [props.ui?.linkText, link.ui?.linkText] })">
               {{ link.text }}
             </span>
           </slot>
@@ -163,42 +163,42 @@ nuxtApp.hooks.hook('page:transition:finish', () => {
   <DefineTriggerTemplate v-slot="{ open }">
     <slot name="leading" :open="open" :ui="ui" />
 
-    <span :class="ui.title({ class: props.ui?.title })">
+    <span data-slot="title" :class="ui.title({ class: props.ui?.title })">
       <slot :open="open">{{ title || t('contentToc.title') }}</slot>
     </span>
 
-    <span :class="ui.trailing({ class: props.ui?.trailing })">
+    <span data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
       <slot name="trailing" :open="open" :ui="ui">
-        <UIcon :name="trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+        <UIcon :name="trailingIcon || appConfig.ui.icons.chevronDown" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>
   </DefineTriggerTemplate>
 
-  <CollapsibleRoot v-slot="{ open }" v-bind="{ ...rootProps, ...$attrs }" :default-open="defaultOpen" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.container({ class: props.ui?.container })">
-      <div v-if="!!slots.top" :class="ui.top({ class: props.ui?.top })">
+  <CollapsibleRoot v-slot="{ open }" v-bind="{ ...rootProps, ...$attrs }" :default-open="defaultOpen" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div v-if="!!slots.top" data-slot="top" :class="ui.top({ class: props.ui?.top })">
         <slot name="top" :links="links" />
       </div>
 
       <template v-if="links?.length">
-        <CollapsibleTrigger :class="ui.trigger({ class: 'lg:hidden' })">
+        <CollapsibleTrigger data-slot="trigger" :class="ui.trigger({ class: 'lg:hidden' })">
           <ReuseTriggerTemplate :open="open" />
         </CollapsibleTrigger>
 
-        <CollapsibleContent :class="ui.content({ class: [props.ui?.content, 'lg:hidden'] })">
-          <div v-if="highlight" :class="ui.indicator({ class: props.ui?.indicator })" :style="indicatorStyle" />
+        <CollapsibleContent data-slot="content" :class="ui.content({ class: [props.ui?.content, 'lg:hidden'] })">
+          <div v-if="highlight" data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })" :style="indicatorStyle" />
 
           <slot name="content" :links="links">
             <ReuseListTemplate :links="links" :level="0" />
           </slot>
         </CollapsibleContent>
 
-        <p :class="ui.trigger({ class: 'hidden lg:flex' })">
+        <p data-slot="trigger" :class="ui.trigger({ class: 'hidden lg:flex' })">
           <ReuseTriggerTemplate :open="open" />
         </p>
 
-        <div :class="ui.content({ class: [props.ui?.content, 'hidden lg:flex'] })">
-          <div v-if="highlight" :class="ui.indicator({ class: props.ui?.indicator })" :style="indicatorStyle" />
+        <div data-slot="content" :class="ui.content({ class: [props.ui?.content, 'hidden lg:flex'] })">
+          <div v-if="highlight" data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })" :style="indicatorStyle" />
 
           <slot name="content" :links="links">
             <ReuseListTemplate :links="links" :level="0" />
@@ -206,7 +206,7 @@ nuxtApp.hooks.hook('page:transition:finish', () => {
         </div>
       </template>
 
-      <div v-if="!!slots.bottom" :class="ui.bottom({ class: props.ui?.bottom, body: !!slots.top || !!links?.length })">
+      <div v-if="!!slots.bottom" data-slot="bottom" :class="ui.bottom({ class: props.ui?.bottom, body: !!slots.top || !!links?.length })">
         <slot name="bottom" :links="links" />
       </div>
     </div>
diff --git a/test/components/__snapshots__/Accordion-vue.spec.ts.snap b/test/components/__snapshots__/Accordion-vue.spec.ts.snap
index 3b8d41a326..3391ab3911 100644
--- a/test/components/__snapshots__/Accordion-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Accordion-vue.spec.ts.snap
@@ -1,40 +1,40 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Accordion > renders with as correctly 1`] = `
-"<section class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
+"<section data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -42,40 +42,40 @@ exports[`Accordion > renders with as correctly 1`] = `
 `;
 
 exports[`Accordion > renders with as correctly 2`] = `
-"<section class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
+"<section data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -83,40 +83,40 @@ exports[`Accordion > renders with as correctly 2`] = `
 `;
 
 exports[`Accordion > renders with body slot correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">
-      <div class="text-sm pb-3.5">Body slot</div>
+  <div data-state="open" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="open" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">
+      <div data-slot="body" class="text-sm pb-3.5">Body slot</div>
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -124,40 +124,40 @@ exports[`Accordion > renders with body slot correctly 1`] = `
 `;
 
 exports[`Accordion > renders with class correctly 1`] = `
-"<div class="w-96">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
+"<div data-slot="root" class="w-96">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -165,40 +165,40 @@ exports[`Accordion > renders with class correctly 1`] = `
 `;
 
 exports[`Accordion > renders with collapsible correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -206,38 +206,38 @@ exports[`Accordion > renders with collapsible correctly 1`] = `
 `;
 
 exports[`Accordion > renders with content slot correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">Content slot</div>
+  <div data-state="open" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="open" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">Content slot</div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -245,120 +245,120 @@ exports[`Accordion > renders with content slot correctly 1`] = `
 `;
 
 exports[`Accordion > renders with custom body slot correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="open" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="open" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11">
-      <div class="text-sm pb-3.5">Custom body slot</div>
+  <div data-state="open" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="open" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11">
+      <div data-slot="body" class="text-sm pb-3.5">Custom body slot</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Accordion > renders with custom slot correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="open" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="open" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11">Custom slot</div>
+  <div data-state="open" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="open" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11">Custom slot</div>
   </div>
 </div>"
 `;
 
 exports[`Accordion > renders with default slot correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Default slot</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Default slot</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Default slot</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">
-      <div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
+  <div data-state="open" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="open" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Default slot</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">
+      <div data-slot="body" class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Default slot</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Default slot</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Default slot</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Default slot</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Default slot</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Default slot</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Default slot</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Default slot</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -366,40 +366,40 @@ exports[`Accordion > renders with default slot correctly 1`] = `
 `;
 
 exports[`Accordion > renders with defaultValue correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">
-      <div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
+  <div data-state="open" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="open" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">
+      <div data-slot="body" class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -407,40 +407,40 @@ exports[`Accordion > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`Accordion > renders with disabled correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-4" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-4" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-6" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-6" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-8" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-8" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-10" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-10" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -448,40 +448,40 @@ exports[`Accordion > renders with disabled correctly 1`] = `
 `;
 
 exports[`Accordion > renders with items correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -489,40 +489,40 @@ exports[`Accordion > renders with items correctly 1`] = `
 `;
 
 exports[`Accordion > renders with labelKey correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">i-lucide-info</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">i-lucide-info</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">i-lucide-download</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">i-lucide-download</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">i-lucide-pipette</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">i-lucide-pipette</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">i-lucide-layout-dashboard</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">i-lucide-layout-dashboard</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">i-lucide-layers-3</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">i-lucide-layers-3</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">i-lucide-wrench</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">i-lucide-wrench</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -530,40 +530,40 @@ exports[`Accordion > renders with labelKey correctly 1`] = `
 `;
 
 exports[`Accordion > renders with leading slot correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0">Leading slot<span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0">Leading slot<span data-slot="label" class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75">Leading slot<span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">
-      <div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
+  <div data-state="open" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="open" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75">Leading slot<span data-slot="label" class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">
+      <div data-slot="body" class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0">Leading slot<span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0">Leading slot<span data-slot="label" class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0">Leading slot<span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0">Leading slot<span data-slot="label" class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0">Leading slot<span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0">Leading slot<span data-slot="label" class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0">Leading slot<span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0">Leading slot<span data-slot="label" class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -571,40 +571,40 @@ exports[`Accordion > renders with leading slot correctly 1`] = `
 `;
 
 exports[`Accordion > renders with modelValue correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">
-      <div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
+  <div data-state="open" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="open" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">
+      <div data-slot="body" class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -612,40 +612,40 @@ exports[`Accordion > renders with modelValue correctly 1`] = `
 `;
 
 exports[`Accordion > renders with trailing slot correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Getting Started</span>Trailing slot</button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Getting Started</span>Trailing slot</button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Installation</span>Trailing slot</button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">
-      <div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
+  <div data-state="open" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="open" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Installation</span>Trailing slot</button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">
+      <div data-slot="body" class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Theming</span>Trailing slot</button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Theming</span>Trailing slot</button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Layouts</span>Trailing slot</button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Layouts</span>Trailing slot</button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Components</span>Trailing slot</button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Components</span>Trailing slot</button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Utilities</span>Trailing slot</button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Utilities</span>Trailing slot</button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -653,40 +653,40 @@ exports[`Accordion > renders with trailing slot correctly 1`] = `
 `;
 
 exports[`Accordion > renders with trailingIcon correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -694,40 +694,40 @@ exports[`Accordion > renders with trailingIcon correctly 1`] = `
 `;
 
 exports[`Accordion > renders with type correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -735,40 +735,40 @@ exports[`Accordion > renders with type correctly 1`] = `
 `;
 
 exports[`Accordion > renders with ui correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-accented">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b last:border-b-0 border-accented">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b last:border-b-0 border-accented">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b last:border-b-0 border-accented">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-accented">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b last:border-b-0 border-accented">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-accented">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b last:border-b-0 border-accented">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-accented">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b last:border-b-0 border-accented">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-accented">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b last:border-b-0 border-accented">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -776,41 +776,41 @@ exports[`Accordion > renders with ui correctly 1`] = `
 `;
 
 exports[`Accordion > renders with unmountOnHide correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
-      <div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
+      <div data-slot="body" class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
-      <div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
+      <div data-slot="body" class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
-      <div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
+      <div data-slot="body" class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
-      <div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
+      <div data-slot="body" class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
-      <div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
+      <div data-slot="body" class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
-      <div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
+      <div data-slot="body" class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
     </div>
   </div>
 </div>"
diff --git a/test/components/__snapshots__/Accordion.spec.ts.snap b/test/components/__snapshots__/Accordion.spec.ts.snap
index 2bfda77570..42b3d819fe 100644
--- a/test/components/__snapshots__/Accordion.spec.ts.snap
+++ b/test/components/__snapshots__/Accordion.spec.ts.snap
@@ -1,40 +1,40 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Accordion > renders with as correctly 1`] = `
-"<section class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
+"<section data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -42,40 +42,40 @@ exports[`Accordion > renders with as correctly 1`] = `
 `;
 
 exports[`Accordion > renders with as correctly 2`] = `
-"<section class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
+"<section data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -83,40 +83,40 @@ exports[`Accordion > renders with as correctly 2`] = `
 `;
 
 exports[`Accordion > renders with body slot correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
-      <div class="text-sm pb-3.5">Body slot</div>
+  <div data-state="open" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="open" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div data-slot="body" class="text-sm pb-3.5">Body slot</div>
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -124,40 +124,40 @@ exports[`Accordion > renders with body slot correctly 1`] = `
 `;
 
 exports[`Accordion > renders with class correctly 1`] = `
-"<div class="w-96">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
+"<div data-slot="root" class="w-96">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -165,40 +165,40 @@ exports[`Accordion > renders with class correctly 1`] = `
 `;
 
 exports[`Accordion > renders with collapsible correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -206,38 +206,38 @@ exports[`Accordion > renders with collapsible correctly 1`] = `
 `;
 
 exports[`Accordion > renders with content slot correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">Content slot</div>
+  <div data-state="open" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="open" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">Content slot</div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -245,120 +245,120 @@ exports[`Accordion > renders with content slot correctly 1`] = `
 `;
 
 exports[`Accordion > renders with custom body slot correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="open" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="open" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11">
-      <div class="text-sm pb-3.5">Custom body slot</div>
+  <div data-state="open" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="open" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11">
+      <div data-slot="body" class="text-sm pb-3.5">Custom body slot</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Accordion > renders with custom slot correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="open" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="open" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11">Custom slot</div>
+  <div data-state="open" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="open" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11">Custom slot</div>
   </div>
 </div>"
 `;
 
 exports[`Accordion > renders with default slot correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Default slot</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Default slot</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Default slot</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
-      <div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
+  <div data-state="open" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="open" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Default slot</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div data-slot="body" class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Default slot</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Default slot</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Default slot</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Default slot</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Default slot</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Default slot</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Default slot</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Default slot</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -366,40 +366,40 @@ exports[`Accordion > renders with default slot correctly 1`] = `
 `;
 
 exports[`Accordion > renders with defaultValue correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
-      <div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
+  <div data-state="open" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="open" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div data-slot="body" class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -407,40 +407,40 @@ exports[`Accordion > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`Accordion > renders with disabled correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -448,40 +448,40 @@ exports[`Accordion > renders with disabled correctly 1`] = `
 `;
 
 exports[`Accordion > renders with items correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -489,40 +489,40 @@ exports[`Accordion > renders with items correctly 1`] = `
 `;
 
 exports[`Accordion > renders with labelKey correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">i-lucide-info</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">i-lucide-info</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">i-lucide-download</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">i-lucide-download</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">i-lucide-pipette</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">i-lucide-pipette</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">i-lucide-layout-dashboard</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">i-lucide-layout-dashboard</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">i-lucide-layers-3</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">i-lucide-layers-3</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">i-lucide-wrench</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">i-lucide-wrench</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -530,40 +530,40 @@ exports[`Accordion > renders with labelKey correctly 1`] = `
 `;
 
 exports[`Accordion > renders with leading slot correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0">Leading slot<span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0">Leading slot<span data-slot="label" class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75">Leading slot<span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
-      <div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
+  <div data-state="open" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="open" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75">Leading slot<span data-slot="label" class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div data-slot="body" class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0">Leading slot<span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0">Leading slot<span data-slot="label" class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0">Leading slot<span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0">Leading slot<span data-slot="label" class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0">Leading slot<span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0">Leading slot<span data-slot="label" class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0">Leading slot<span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0">Leading slot<span data-slot="label" class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -571,40 +571,40 @@ exports[`Accordion > renders with leading slot correctly 1`] = `
 `;
 
 exports[`Accordion > renders with modelValue correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
-      <div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
+  <div data-state="open" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="open" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div data-slot="body" class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -612,40 +612,40 @@ exports[`Accordion > renders with modelValue correctly 1`] = `
 `;
 
 exports[`Accordion > renders with trailing slot correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span>Trailing slot</button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Getting Started</span>Trailing slot</button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span>Trailing slot</button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
-      <div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
+  <div data-state="open" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="open" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Installation</span>Trailing slot</button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div data-slot="body" class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span>Trailing slot</button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Theming</span>Trailing slot</button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span>Trailing slot</button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Layouts</span>Trailing slot</button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span>Trailing slot</button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Components</span>Trailing slot</button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span>Trailing slot</button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Utilities</span>Trailing slot</button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -653,40 +653,40 @@ exports[`Accordion > renders with trailing slot correctly 1`] = `
 `;
 
 exports[`Accordion > renders with trailingIcon correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Getting Started</span><span class="iconify i-lucide:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Installation</span><span class="iconify i-lucide:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Theming</span><span class="iconify i-lucide:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Layouts</span><span class="iconify i-lucide:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Components</span><span class="iconify i-lucide:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -694,40 +694,40 @@ exports[`Accordion > renders with trailingIcon correctly 1`] = `
 `;
 
 exports[`Accordion > renders with type correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -735,40 +735,40 @@ exports[`Accordion > renders with type correctly 1`] = `
 `;
 
 exports[`Accordion > renders with ui correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-accented">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b last:border-b-0 border-accented">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b last:border-b-0 border-accented">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b last:border-b-0 border-accented">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-accented">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b last:border-b-0 border-accented">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-accented">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b last:border-b-0 border-accented">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-accented">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b last:border-b-0 border-accented">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!--v-if-->
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-accented">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b last:border-b-0 border-accented">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!--v-if-->
     </div>
   </div>
@@ -776,41 +776,41 @@ exports[`Accordion > renders with ui correctly 1`] = `
 `;
 
 exports[`Accordion > renders with unmountOnHide correctly 1`] = `
-"<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
-      <div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
+"<div data-slot="root" class="w-full">
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
+      <div data-slot="body" class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
     </div>
   </div>
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
-      <div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
+  <div data-state="closed" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
+      <div data-slot="body" class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
-      <div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
+      <div data-slot="body" class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
-      <div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
+      <div data-slot="body" class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
-      <div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
+      <div data-slot="body" class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
     </div>
   </div>
-  <div data-state="closed" data-orientation="vertical" class="border-b border-default last:border-b-0">
-    <div data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
-      <div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
+  <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
+    <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span></button></div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
+      <div data-slot="body" class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
     </div>
   </div>
 </div>"
diff --git a/test/components/__snapshots__/Alert-vue.spec.ts.snap b/test/components/__snapshots__/Alert-vue.spec.ts.snap
index 68c08ca719..7c4741f3a2 100644
--- a/test/components/__snapshots__/Alert-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Alert-vue.spec.ts.snap
@@ -1,13 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Alert > renders with actions correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
-    <div class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Action</span>
+    <div data-slot="actions" class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Action</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -16,10 +16,10 @@ exports[`Alert > renders with actions correctly 1`] = `
 `;
 
 exports[`Alert > renders with as correctly 1`] = `
-"<article data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
+"<article data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -28,9 +28,9 @@ exports[`Alert > renders with as correctly 1`] = `
 `;
 
 exports[`Alert > renders with avatar correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-11 text-[22px] shrink-0"><img src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-11 text-[22px] shrink-0"><img src="https://github.com/benjamincanac.png" width="44" height="44" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -39,10 +39,10 @@ exports[`Alert > renders with avatar correctly 1`] = `
 `;
 
 exports[`Alert > renders with class correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted w-48">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted w-48">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -51,15 +51,15 @@ exports[`Alert > renders with class correctly 1`] = `
 `;
 
 exports[`Alert > renders with close correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
-  <div class="flex flex-wrap gap-1.5 shrink-0 items-center">
-    <!--v-if--><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="actions" class="flex flex-wrap gap-1.5 shrink-0 items-center">
+    <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -68,10 +68,10 @@ exports[`Alert > renders with close correctly 1`] = `
 `;
 
 exports[`Alert > renders with close slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -80,15 +80,15 @@ exports[`Alert > renders with close slot correctly 1`] = `
 `;
 
 exports[`Alert > renders with closeIcon correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
-  <div class="flex flex-wrap gap-1.5 shrink-0 items-center">
-    <!--v-if--><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="actions" class="flex flex-wrap gap-1.5 shrink-0 items-center">
+    <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -97,11 +97,11 @@ exports[`Alert > renders with closeIcon correctly 1`] = `
 `;
 
 exports[`Alert > renders with description correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
-    <div class="text-sm opacity-90 mt-1">Description</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
+    <div data-slot="description" class="text-sm opacity-90 mt-1">Description</div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -109,11 +109,11 @@ exports[`Alert > renders with description correctly 1`] = `
 `;
 
 exports[`Alert > renders with description slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
-    <div class="text-sm opacity-90 mt-1">Description slot</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
+    <div data-slot="description" class="text-sm opacity-90 mt-1">Description slot</div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -121,9 +121,9 @@ exports[`Alert > renders with description slot correctly 1`] = `
 `;
 
 exports[`Alert > renders with icon correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -132,10 +132,10 @@ exports[`Alert > renders with icon correctly 1`] = `
 `;
 
 exports[`Alert > renders with leading slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Leading slot</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Leading slot</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -144,10 +144,10 @@ exports[`Alert > renders with leading slot correctly 1`] = `
 `;
 
 exports[`Alert > renders with neutral variant outline correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start text-highlighted bg-default ring ring-inset ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start text-highlighted bg-default ring ring-inset ring-default">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -156,10 +156,10 @@ exports[`Alert > renders with neutral variant outline correctly 1`] = `
 `;
 
 exports[`Alert > renders with neutral variant soft correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start text-highlighted bg-elevated/50">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start text-highlighted bg-elevated/50">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -168,10 +168,10 @@ exports[`Alert > renders with neutral variant soft correctly 1`] = `
 `;
 
 exports[`Alert > renders with neutral variant solid correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start text-inverted bg-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start text-inverted bg-inverted">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -180,10 +180,10 @@ exports[`Alert > renders with neutral variant solid correctly 1`] = `
 `;
 
 exports[`Alert > renders with neutral variant subtle correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start text-highlighted bg-elevated/50 ring ring-inset ring-accented">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start text-highlighted bg-elevated/50 ring ring-inset ring-accented">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -192,14 +192,14 @@ exports[`Alert > renders with neutral variant subtle correctly 1`] = `
 `;
 
 exports[`Alert > renders with orientation horizontal correctly 1`] = `
-"<div data-orientation="horizontal" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-primary text-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
-    <div class="text-sm opacity-90 mt-1">This is a description</div>
+"<div data-orientation="horizontal" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-primary text-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
+    <div data-slot="description" class="text-sm opacity-90 mt-1">This is a description</div>
     <!--v-if-->
   </div>
-  <div class="flex flex-wrap gap-1.5 shrink-0 items-center"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Action</span>
+  <div data-slot="actions" class="flex flex-wrap gap-1.5 shrink-0 items-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Action</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -208,12 +208,12 @@ exports[`Alert > renders with orientation horizontal correctly 1`] = `
 `;
 
 exports[`Alert > renders with orientation vertical correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
-    <div class="text-sm opacity-90 mt-1">This is a description</div>
-    <div class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Action</span>
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
+    <div data-slot="description" class="text-sm opacity-90 mt-1">This is a description</div>
+    <div data-slot="actions" class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Action</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -222,10 +222,10 @@ exports[`Alert > renders with orientation vertical correctly 1`] = `
 `;
 
 exports[`Alert > renders with primary variant outline correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start text-primary ring ring-inset ring-primary/25">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start text-primary ring ring-inset ring-primary/25">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -234,10 +234,10 @@ exports[`Alert > renders with primary variant outline correctly 1`] = `
 `;
 
 exports[`Alert > renders with primary variant soft correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary/10 text-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary/10 text-primary">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -246,10 +246,10 @@ exports[`Alert > renders with primary variant soft correctly 1`] = `
 `;
 
 exports[`Alert > renders with primary variant solid correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -258,10 +258,10 @@ exports[`Alert > renders with primary variant solid correctly 1`] = `
 `;
 
 exports[`Alert > renders with primary variant subtle correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary/10 text-primary ring ring-inset ring-primary/25">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary/10 text-primary ring ring-inset ring-primary/25">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -270,10 +270,10 @@ exports[`Alert > renders with primary variant subtle correctly 1`] = `
 `;
 
 exports[`Alert > renders with title correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -282,10 +282,10 @@ exports[`Alert > renders with title correctly 1`] = `
 `;
 
 exports[`Alert > renders with title slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Title slot</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Title slot</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -294,10 +294,10 @@ exports[`Alert > renders with title slot correctly 1`] = `
 `;
 
 exports[`Alert > renders with ui correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-bold">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-bold">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
diff --git a/test/components/__snapshots__/Alert.spec.ts.snap b/test/components/__snapshots__/Alert.spec.ts.snap
index 66dabcd8ca..dc55b104ce 100644
--- a/test/components/__snapshots__/Alert.spec.ts.snap
+++ b/test/components/__snapshots__/Alert.spec.ts.snap
@@ -1,13 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Alert > renders with actions correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
-    <div class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Action</span>
+    <div data-slot="actions" class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Action</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -16,10 +16,10 @@ exports[`Alert > renders with actions correctly 1`] = `
 `;
 
 exports[`Alert > renders with as correctly 1`] = `
-"<article data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
+"<article data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -28,9 +28,9 @@ exports[`Alert > renders with as correctly 1`] = `
 `;
 
 exports[`Alert > renders with avatar correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-11 text-[22px] shrink-0"><img src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-11 text-[22px] shrink-0"><img src="https://github.com/benjamincanac.png" width="44" height="44" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -39,10 +39,10 @@ exports[`Alert > renders with avatar correctly 1`] = `
 `;
 
 exports[`Alert > renders with class correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted w-48">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted w-48">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -51,15 +51,15 @@ exports[`Alert > renders with class correctly 1`] = `
 `;
 
 exports[`Alert > renders with close correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
-  <div class="flex flex-wrap gap-1.5 shrink-0 items-center">
-    <!--v-if--><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="actions" class="flex flex-wrap gap-1.5 shrink-0 items-center">
+    <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -68,10 +68,10 @@ exports[`Alert > renders with close correctly 1`] = `
 `;
 
 exports[`Alert > renders with close slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -80,15 +80,15 @@ exports[`Alert > renders with close slot correctly 1`] = `
 `;
 
 exports[`Alert > renders with closeIcon correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
-  <div class="flex flex-wrap gap-1.5 shrink-0 items-center">
-    <!--v-if--><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="actions" class="flex flex-wrap gap-1.5 shrink-0 items-center">
+    <!--v-if--><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -97,11 +97,11 @@ exports[`Alert > renders with closeIcon correctly 1`] = `
 `;
 
 exports[`Alert > renders with description correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
-    <div class="text-sm opacity-90 mt-1">Description</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
+    <div data-slot="description" class="text-sm opacity-90 mt-1">Description</div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -109,11 +109,11 @@ exports[`Alert > renders with description correctly 1`] = `
 `;
 
 exports[`Alert > renders with description slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
-    <div class="text-sm opacity-90 mt-1">Description slot</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
+    <div data-slot="description" class="text-sm opacity-90 mt-1">Description slot</div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -121,9 +121,9 @@ exports[`Alert > renders with description slot correctly 1`] = `
 `;
 
 exports[`Alert > renders with icon correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted"><span class="iconify i-lucide:lightbulb shrink-0 size-5" aria-hidden="true"></span>
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted"><span class="iconify i-lucide:lightbulb shrink-0 size-5" aria-hidden="true" data-slot="icon"></span>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -132,10 +132,10 @@ exports[`Alert > renders with icon correctly 1`] = `
 `;
 
 exports[`Alert > renders with leading slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Leading slot</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Leading slot</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -144,10 +144,10 @@ exports[`Alert > renders with leading slot correctly 1`] = `
 `;
 
 exports[`Alert > renders with neutral variant outline correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start text-highlighted bg-default ring ring-inset ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start text-highlighted bg-default ring ring-inset ring-default">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -156,10 +156,10 @@ exports[`Alert > renders with neutral variant outline correctly 1`] = `
 `;
 
 exports[`Alert > renders with neutral variant soft correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start text-highlighted bg-elevated/50">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start text-highlighted bg-elevated/50">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -168,10 +168,10 @@ exports[`Alert > renders with neutral variant soft correctly 1`] = `
 `;
 
 exports[`Alert > renders with neutral variant solid correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start text-inverted bg-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start text-inverted bg-inverted">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -180,10 +180,10 @@ exports[`Alert > renders with neutral variant solid correctly 1`] = `
 `;
 
 exports[`Alert > renders with neutral variant subtle correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start text-highlighted bg-elevated/50 ring ring-inset ring-accented">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start text-highlighted bg-elevated/50 ring ring-inset ring-accented">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -192,14 +192,14 @@ exports[`Alert > renders with neutral variant subtle correctly 1`] = `
 `;
 
 exports[`Alert > renders with orientation horizontal correctly 1`] = `
-"<div data-orientation="horizontal" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-primary text-inverted"><span class="iconify i-lucide:lightbulb shrink-0 size-5" aria-hidden="true"></span>
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
-    <div class="text-sm opacity-90 mt-1">This is a description</div>
+"<div data-orientation="horizontal" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-primary text-inverted"><span class="iconify i-lucide:lightbulb shrink-0 size-5" aria-hidden="true" data-slot="icon"></span>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
+    <div data-slot="description" class="text-sm opacity-90 mt-1">This is a description</div>
     <!--v-if-->
   </div>
-  <div class="flex flex-wrap gap-1.5 shrink-0 items-center"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Action</span>
+  <div data-slot="actions" class="flex flex-wrap gap-1.5 shrink-0 items-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Action</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -208,12 +208,12 @@ exports[`Alert > renders with orientation horizontal correctly 1`] = `
 `;
 
 exports[`Alert > renders with orientation vertical correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted"><span class="iconify i-lucide:lightbulb shrink-0 size-5" aria-hidden="true"></span>
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
-    <div class="text-sm opacity-90 mt-1">This is a description</div>
-    <div class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Action</span>
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted"><span class="iconify i-lucide:lightbulb shrink-0 size-5" aria-hidden="true" data-slot="icon"></span>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
+    <div data-slot="description" class="text-sm opacity-90 mt-1">This is a description</div>
+    <div data-slot="actions" class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Action</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -222,10 +222,10 @@ exports[`Alert > renders with orientation vertical correctly 1`] = `
 `;
 
 exports[`Alert > renders with primary variant outline correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start text-primary ring ring-inset ring-primary/25">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start text-primary ring ring-inset ring-primary/25">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -234,10 +234,10 @@ exports[`Alert > renders with primary variant outline correctly 1`] = `
 `;
 
 exports[`Alert > renders with primary variant soft correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary/10 text-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary/10 text-primary">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -246,10 +246,10 @@ exports[`Alert > renders with primary variant soft correctly 1`] = `
 `;
 
 exports[`Alert > renders with primary variant solid correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -258,10 +258,10 @@ exports[`Alert > renders with primary variant solid correctly 1`] = `
 `;
 
 exports[`Alert > renders with primary variant subtle correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary/10 text-primary ring ring-inset ring-primary/25">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary/10 text-primary ring ring-inset ring-primary/25">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -270,10 +270,10 @@ exports[`Alert > renders with primary variant subtle correctly 1`] = `
 `;
 
 exports[`Alert > renders with title correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -282,10 +282,10 @@ exports[`Alert > renders with title correctly 1`] = `
 `;
 
 exports[`Alert > renders with title slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-medium">Title slot</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-medium">Title slot</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -294,10 +294,10 @@ exports[`Alert > renders with title slot correctly 1`] = `
 `;
 
 exports[`Alert > renders with ui correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col">
-    <div class="text-sm font-bold">Alert</div>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col">
+    <div data-slot="title" class="text-sm font-bold">Alert</div>
     <!--v-if-->
     <!--v-if-->
   </div>
diff --git a/test/components/__snapshots__/AuthForm-vue.spec.ts.snap b/test/components/__snapshots__/AuthForm-vue.spec.ts.snap
index 916c1a23c3..b5dadde065 100644
--- a/test/components/__snapshots__/AuthForm-vue.spec.ts.snap
+++ b/test/components/__snapshots__/AuthForm-vue.spec.ts.snap
@@ -1,43 +1,43 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`AuthForm > renders with as correctly 1`] = `
-"<section class="w-full space-y-6">
+"<section data-slot="root" class="w-full space-y-6">
   <!--v-if-->
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-1" class="block font-medium text-default">Email</label>
+    <form id="v-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -47,43 +47,43 @@ exports[`AuthForm > renders with as correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with class correctly 1`] = `
-"<div class="w-full space-y-6 max-w-sm">
+"<div data-slot="root" class="w-full space-y-6 max-w-sm">
   <!--v-if-->
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-1" class="block font-medium text-default">Email</label>
+    <form id="v-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -93,47 +93,47 @@ exports[`AuthForm > renders with class correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with description correctly 1`] = `
-"<div class="w-full space-y-6">
-  <div class="flex flex-col text-center">
+"<div data-slot="root" class="w-full space-y-6">
+  <div data-slot="header" class="flex flex-col text-center">
     <!--v-if-->
     <!--v-if-->
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
   </div>
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-1" class="block font-medium text-default">Email</label>
+    <form id="v-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -143,47 +143,47 @@ exports[`AuthForm > renders with description correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with description slot correctly 1`] = `
-"<div class="w-full space-y-6">
-  <div class="flex flex-col text-center">
+"<div data-slot="root" class="w-full space-y-6">
+  <div data-slot="header" class="flex flex-col text-center">
     <!--v-if-->
     <!--v-if-->
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
   </div>
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-1" class="block font-medium text-default">Email</label>
+    <form id="v-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -193,43 +193,43 @@ exports[`AuthForm > renders with description slot correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with disabled correctly 1`] = `
-"<div class="w-full space-y-6">
+"<div data-slot="root" class="w-full space-y-6">
   <!--v-if-->
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-1" class="block font-medium text-default">Email</label>
+    <form id="v-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" disabled="" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" disabled="" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" disabled="" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" disabled="" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -239,43 +239,43 @@ exports[`AuthForm > renders with disabled correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with fields correctly 1`] = `
-"<div class="w-full space-y-6">
+"<div data-slot="root" class="w-full space-y-6">
   <!--v-if-->
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-1" class="block font-medium text-default">Email</label>
+    <form id="v-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -285,89 +285,89 @@ exports[`AuthForm > renders with fields correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with footer slot correctly 1`] = `
-"<div class="w-full space-y-6">
+"<div data-slot="root" class="w-full space-y-6">
   <!--v-if-->
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-1" class="block font-medium text-default">Email</label>
+    <form id="v-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
   </div>
-  <div class="text-sm text-center text-muted mt-2">Footer</div>
+  <div data-slot="footer" class="text-sm text-center text-muted mt-2">Footer</div>
 </div>"
 `;
 
 exports[`AuthForm > renders with header slot correctly 1`] = `
-"<div class="w-full space-y-6">
-  <div class="flex flex-col text-center">Header</div>
-  <div class="gap-y-6 flex flex-col">
+"<div data-slot="root" class="w-full space-y-6">
+  <div data-slot="header" class="flex flex-col text-center">Header</div>
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-1" class="block font-medium text-default">Email</label>
+    <form id="v-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -377,47 +377,47 @@ exports[`AuthForm > renders with header slot correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with icon correctly 1`] = `
-"<div class="w-full space-y-6">
-  <div class="flex flex-col text-center">
-    <div class="mb-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-8 shrink-0 inline-block"></svg></div>
+"<div data-slot="root" class="w-full space-y-6">
+  <div data-slot="header" class="flex flex-col text-center">
+    <div data-slot="leading" class="mb-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-8 shrink-0 inline-block"></svg></div>
     <!--v-if-->
     <!--v-if-->
   </div>
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-1" class="block font-medium text-default">Email</label>
+    <form id="v-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -427,47 +427,47 @@ exports[`AuthForm > renders with icon correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with leading slot correctly 1`] = `
-"<div class="w-full space-y-6">
-  <div class="flex flex-col text-center">
-    <div class="mb-2">Leading</div>
+"<div data-slot="root" class="w-full space-y-6">
+  <div data-slot="header" class="flex flex-col text-center">
+    <div data-slot="leading" class="mb-2">Leading</div>
     <!--v-if-->
     <!--v-if-->
   </div>
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-1" class="block font-medium text-default">Email</label>
+    <form id="v-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -477,42 +477,42 @@ exports[`AuthForm > renders with leading slot correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with loading correctly 1`] = `
-"<div class="w-full space-y-6">
+"<div data-slot="root" class="w-full space-y-6">
   <!--v-if-->
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-1" class="block font-medium text-default">Email</label>
+    <form id="v-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" disabled="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 animate-spin"></svg><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5 animate-spin"></svg><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -522,49 +522,49 @@ exports[`AuthForm > renders with loading correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with providers correctly 1`] = `
-"<div class="w-full space-y-6">
+"<div data-slot="root" class="w-full space-y-6">
   <!--v-if-->
-  <div class="gap-y-6 flex flex-col">
-    <div class="space-y-3"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Google</span>
+  <div data-slot="body" class="gap-y-6 flex flex-col">
+    <div data-slot="providers" class="space-y-3"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Google</span>
         <!--v-if-->
       </button></div>
-    <div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-      <div class="border-default w-full border-solid border-t"></div>
-      <div class="font-medium text-default flex mx-3 whitespace-nowrap"><span class="text-sm">or</span></div>
-      <div class="border-default w-full border-solid border-t"></div>
+    <div data-orientation="horizontal" role="separator" data-slot="separator" class="flex items-center align-center text-center w-full flex-row">
+      <div data-slot="border" class="border-default w-full border-solid border-t"></div>
+      <div data-slot="container" class="font-medium text-default flex mx-3 whitespace-nowrap"><span data-slot="label" class="text-sm">or</span></div>
+      <div data-slot="border" class="border-default w-full border-solid border-t"></div>
     </div>
-    <form id="v-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-1" class="block font-medium text-default">Email</label>
+    <form id="v-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -574,43 +574,43 @@ exports[`AuthForm > renders with providers correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with providers slot correctly 1`] = `
-"<div class="w-full space-y-6">
+"<div data-slot="root" class="w-full space-y-6">
   <!--v-if-->
-  <div class="gap-y-6 flex flex-col">
-    <div class="space-y-3">Providers</div>
+  <div data-slot="body" class="gap-y-6 flex flex-col">
+    <div data-slot="providers" class="space-y-3">Providers</div>
     <!--v-if-->
-    <form id="v-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-1" class="block font-medium text-default">Email</label>
+    <form id="v-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -620,43 +620,43 @@ exports[`AuthForm > renders with providers slot correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with separator correctly 1`] = `
-"<div class="w-full space-y-6">
+"<div data-slot="root" class="w-full space-y-6">
   <!--v-if-->
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-1" class="block font-medium text-default">Email</label>
+    <form id="v-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -666,43 +666,43 @@ exports[`AuthForm > renders with separator correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with submit correctly 1`] = `
-"<div class="w-full space-y-6">
+"<div data-slot="root" class="w-full space-y-6">
   <!--v-if-->
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-1" class="block font-medium text-default">Email</label>
+    <form id="v-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Submit</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Submit</span>
         <!--v-if-->
       </button>
     </form>
@@ -712,37 +712,37 @@ exports[`AuthForm > renders with submit correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with submit slot correctly 1`] = `
-"<div class="w-full space-y-6">
+"<div data-slot="root" class="w-full space-y-6">
   <!--v-if-->
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-1" class="block font-medium text-default">Email</label>
+    <form id="v-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
@@ -755,47 +755,47 @@ exports[`AuthForm > renders with submit slot correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with title correctly 1`] = `
-"<div class="w-full space-y-6">
-  <div class="flex flex-col text-center">
+"<div data-slot="root" class="w-full space-y-6">
+  <div data-slot="header" class="flex flex-col text-center">
     <!--v-if-->
-    <div class="text-xl text-pretty font-semibold text-highlighted">Title</div>
+    <div data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</div>
     <!--v-if-->
   </div>
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-1" class="block font-medium text-default">Email</label>
+    <form id="v-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -805,47 +805,47 @@ exports[`AuthForm > renders with title correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with title slot correctly 1`] = `
-"<div class="w-full space-y-6">
-  <div class="flex flex-col text-center">
+"<div data-slot="root" class="w-full space-y-6">
+  <div data-slot="header" class="flex flex-col text-center">
     <!--v-if-->
-    <div class="text-xl text-pretty font-semibold text-highlighted">Title</div>
+    <div data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</div>
     <!--v-if-->
   </div>
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-1" class="block font-medium text-default">Email</label>
+    <form id="v-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -855,43 +855,43 @@ exports[`AuthForm > renders with title slot correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with ui correctly 1`] = `
-"<div class="w-full space-y-6">
+"<div data-slot="root" class="w-full space-y-6">
   <!--v-if-->
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-1" class="block font-medium text-default">Email</label>
+    <form id="v-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -901,42 +901,42 @@ exports[`AuthForm > renders with ui correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with validation slot correctly 1`] = `
-"<div class="w-full space-y-6">
+"<div data-slot="root" class="w-full space-y-6">
   <!--v-if-->
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-1" class="block font-medium text-default">Email</label>
+    <form id="v-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
-      </div>Validation<button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      </div>Validation<button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
diff --git a/test/components/__snapshots__/AuthForm.spec.ts.snap b/test/components/__snapshots__/AuthForm.spec.ts.snap
index ddfaf90125..4687f8c65c 100644
--- a/test/components/__snapshots__/AuthForm.spec.ts.snap
+++ b/test/components/__snapshots__/AuthForm.spec.ts.snap
@@ -1,45 +1,45 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`AuthForm > renders with as correctly 1`] = `
-"<section class="w-full space-y-6">
+"<section data-slot="root" class="w-full space-y-6">
   <!--v-if-->
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0-0-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-1" class="block font-medium text-default">Email</label>
+    <form id="v-0-0-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true"></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -49,45 +49,45 @@ exports[`AuthForm > renders with as correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with class correctly 1`] = `
-"<div class="w-full space-y-6 max-w-sm">
+"<div data-slot="root" class="w-full space-y-6 max-w-sm">
   <!--v-if-->
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0-0-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-1" class="block font-medium text-default">Email</label>
+    <form id="v-0-0-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true"></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -97,49 +97,49 @@ exports[`AuthForm > renders with class correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with description correctly 1`] = `
-"<div class="w-full space-y-6">
-  <div class="flex flex-col text-center">
+"<div data-slot="root" class="w-full space-y-6">
+  <div data-slot="header" class="flex flex-col text-center">
     <!--v-if-->
     <!--v-if-->
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
   </div>
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0-0-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-1" class="block font-medium text-default">Email</label>
+    <form id="v-0-0-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true"></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -149,49 +149,49 @@ exports[`AuthForm > renders with description correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with description slot correctly 1`] = `
-"<div class="w-full space-y-6">
-  <div class="flex flex-col text-center">
+"<div data-slot="root" class="w-full space-y-6">
+  <div data-slot="header" class="flex flex-col text-center">
     <!--v-if-->
     <!--v-if-->
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
   </div>
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0-0-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-1" class="block font-medium text-default">Email</label>
+    <form id="v-0-0-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true"></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -201,45 +201,45 @@ exports[`AuthForm > renders with description slot correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with disabled correctly 1`] = `
-"<div class="w-full space-y-6">
+"<div data-slot="root" class="w-full space-y-6">
   <!--v-if-->
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0-0-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-1" class="block font-medium text-default">Email</label>
+    <form id="v-0-0-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" disabled="" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" disabled="" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" disabled="" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true"></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" disabled="" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -249,45 +249,45 @@ exports[`AuthForm > renders with disabled correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with fields correctly 1`] = `
-"<div class="w-full space-y-6">
+"<div data-slot="root" class="w-full space-y-6">
   <!--v-if-->
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0-0-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-1" class="block font-medium text-default">Email</label>
+    <form id="v-0-0-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true"></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -297,93 +297,93 @@ exports[`AuthForm > renders with fields correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with footer slot correctly 1`] = `
-"<div class="w-full space-y-6">
+"<div data-slot="root" class="w-full space-y-6">
   <!--v-if-->
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0-0-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-1" class="block font-medium text-default">Email</label>
+    <form id="v-0-0-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true"></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
   </div>
-  <div class="text-sm text-center text-muted mt-2">Footer</div>
+  <div data-slot="footer" class="text-sm text-center text-muted mt-2">Footer</div>
 </div>"
 `;
 
 exports[`AuthForm > renders with header slot correctly 1`] = `
-"<div class="w-full space-y-6">
-  <div class="flex flex-col text-center">Header</div>
-  <div class="gap-y-6 flex flex-col">
+"<div data-slot="root" class="w-full space-y-6">
+  <div data-slot="header" class="flex flex-col text-center">Header</div>
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0-0-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-1" class="block font-medium text-default">Email</label>
+    <form id="v-0-0-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true"></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -393,49 +393,49 @@ exports[`AuthForm > renders with header slot correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with icon correctly 1`] = `
-"<div class="w-full space-y-6">
-  <div class="flex flex-col text-center">
-    <div class="mb-2"><span class="iconify i-lucide:user size-8 shrink-0 inline-block" aria-hidden="true"></span></div>
+"<div data-slot="root" class="w-full space-y-6">
+  <div data-slot="header" class="flex flex-col text-center">
+    <div data-slot="leading" class="mb-2"><span class="iconify i-lucide:user size-8 shrink-0 inline-block" aria-hidden="true" data-slot="leadingIcon"></span></div>
     <!--v-if-->
     <!--v-if-->
   </div>
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0-0-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-1" class="block font-medium text-default">Email</label>
+    <form id="v-0-0-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true"></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -445,49 +445,49 @@ exports[`AuthForm > renders with icon correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with leading slot correctly 1`] = `
-"<div class="w-full space-y-6">
-  <div class="flex flex-col text-center">
-    <div class="mb-2">Leading</div>
+"<div data-slot="root" class="w-full space-y-6">
+  <div data-slot="header" class="flex flex-col text-center">
+    <div data-slot="leading" class="mb-2">Leading</div>
     <!--v-if-->
     <!--v-if-->
   </div>
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0-0-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-1" class="block font-medium text-default">Email</label>
+    <form id="v-0-0-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true"></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -497,44 +497,44 @@ exports[`AuthForm > renders with leading slot correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with loading correctly 1`] = `
-"<div class="w-full space-y-6">
+"<div data-slot="root" class="w-full space-y-6">
   <!--v-if-->
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0-0-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-1" class="block font-medium text-default">Email</label>
+    <form id="v-0-0-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true"></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" disabled="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:loader-circle shrink-0 size-5 animate-spin" aria-hidden="true"></span><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:loader-circle shrink-0 size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -544,51 +544,51 @@ exports[`AuthForm > renders with loading correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with providers correctly 1`] = `
-"<div class="w-full space-y-6">
+"<div data-slot="root" class="w-full space-y-6">
   <!--v-if-->
-  <div class="gap-y-6 flex flex-col">
-    <div class="space-y-3"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"><span class="iconify i-simple-icons:google shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Google</span>
+  <div data-slot="body" class="gap-y-6 flex flex-col">
+    <div data-slot="providers" class="space-y-3"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"><span class="iconify i-simple-icons:google shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Google</span>
         <!--v-if-->
       </button></div>
-    <div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-      <div class="border-default w-full border-solid border-t"></div>
-      <div class="font-medium text-default flex mx-3 whitespace-nowrap"><span class="text-sm">or</span></div>
-      <div class="border-default w-full border-solid border-t"></div>
+    <div data-orientation="horizontal" role="separator" data-slot="separator" class="flex items-center align-center text-center w-full flex-row">
+      <div data-slot="border" class="border-default w-full border-solid border-t"></div>
+      <div data-slot="container" class="font-medium text-default flex mx-3 whitespace-nowrap"><span data-slot="label" class="text-sm">or</span></div>
+      <div data-slot="border" class="border-default w-full border-solid border-t"></div>
     </div>
-    <form id="v-0-0-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-1" class="block font-medium text-default">Email</label>
+    <form id="v-0-0-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true"></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -598,45 +598,45 @@ exports[`AuthForm > renders with providers correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with providers slot correctly 1`] = `
-"<div class="w-full space-y-6">
+"<div data-slot="root" class="w-full space-y-6">
   <!--v-if-->
-  <div class="gap-y-6 flex flex-col">
-    <div class="space-y-3">Providers</div>
+  <div data-slot="body" class="gap-y-6 flex flex-col">
+    <div data-slot="providers" class="space-y-3">Providers</div>
     <!--v-if-->
-    <form id="v-0-0-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-1" class="block font-medium text-default">Email</label>
+    <form id="v-0-0-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true"></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -646,45 +646,45 @@ exports[`AuthForm > renders with providers slot correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with separator correctly 1`] = `
-"<div class="w-full space-y-6">
+"<div data-slot="root" class="w-full space-y-6">
   <!--v-if-->
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0-0-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-1" class="block font-medium text-default">Email</label>
+    <form id="v-0-0-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true"></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -694,45 +694,45 @@ exports[`AuthForm > renders with separator correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with submit correctly 1`] = `
-"<div class="w-full space-y-6">
+"<div data-slot="root" class="w-full space-y-6">
   <!--v-if-->
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0-0-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-1" class="block font-medium text-default">Email</label>
+    <form id="v-0-0-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true"></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Submit</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Submit</span>
         <!--v-if-->
       </button>
     </form>
@@ -742,37 +742,37 @@ exports[`AuthForm > renders with submit correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with submit slot correctly 1`] = `
-"<div class="w-full space-y-6">
+"<div data-slot="root" class="w-full space-y-6">
   <!--v-if-->
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0-0-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-1" class="block font-medium text-default">Email</label>
+    <form id="v-0-0-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true"></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if--></button></span>
           </div>
@@ -787,49 +787,49 @@ exports[`AuthForm > renders with submit slot correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with title correctly 1`] = `
-"<div class="w-full space-y-6">
-  <div class="flex flex-col text-center">
+"<div data-slot="root" class="w-full space-y-6">
+  <div data-slot="header" class="flex flex-col text-center">
     <!--v-if-->
-    <div class="text-xl text-pretty font-semibold text-highlighted">Title</div>
+    <div data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</div>
     <!--v-if-->
   </div>
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0-0-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-1" class="block font-medium text-default">Email</label>
+    <form id="v-0-0-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true"></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -839,49 +839,49 @@ exports[`AuthForm > renders with title correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with title slot correctly 1`] = `
-"<div class="w-full space-y-6">
-  <div class="flex flex-col text-center">
+"<div data-slot="root" class="w-full space-y-6">
+  <div data-slot="header" class="flex flex-col text-center">
     <!--v-if-->
-    <div class="text-xl text-pretty font-semibold text-highlighted">Title</div>
+    <div data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</div>
     <!--v-if-->
   </div>
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0-0-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-1" class="block font-medium text-default">Email</label>
+    <form id="v-0-0-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true"></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -891,45 +891,45 @@ exports[`AuthForm > renders with title slot correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with ui correctly 1`] = `
-"<div class="w-full space-y-6">
+"<div data-slot="root" class="w-full space-y-6">
   <!--v-if-->
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0-0-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-1" class="block font-medium text-default">Email</label>
+    <form id="v-0-0-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true"></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
       </div>
-      <!--v-if--><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      <!--v-if--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
@@ -939,44 +939,44 @@ exports[`AuthForm > renders with ui correctly 1`] = `
 `;
 
 exports[`AuthForm > renders with validation slot correctly 1`] = `
-"<div class="w-full space-y-6">
+"<div data-slot="root" class="w-full space-y-6">
   <!--v-if-->
-  <div class="gap-y-6 flex flex-col">
+  <div data-slot="body" class="gap-y-6 flex flex-col">
     <!--v-if-->
     <!--v-if-->
-    <form id="v-0-0-0" class="space-y-5">
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-1" class="block font-medium text-default">Email</label>
+    <form id="v-0-0-0" class="space-y-5" data-slot="form">
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
+          <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div class="text-sm">
-        <div class="">
-          <div class="flex content-center items-center justify-between"><label for="v-0-0-2" class="block font-medium text-default">Password</label>
+      <div data-slot="root" class="text-sm">
+        <div data-slot="wrapper" class="">
+          <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
-            <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true"></span>
+          <div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0-2" type="password" name="password" data-slot="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off" aria-invalid="false">
+            <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Show password" aria-pressed="false" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" aria-controls="v-0-0-2"><span class="iconify i-lucide:eye shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
             <!--v-if-->
             <!--v-if--></button></span>
           </div>
           <!--v-if-->
         </div>
-      </div>Validation<button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-        <!--v-if--><span class="truncate">Continue</span>
+      </div>Validation<button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        <!--v-if--><span data-slot="label" class="truncate">Continue</span>
         <!--v-if-->
       </button>
     </form>
diff --git a/test/components/__snapshots__/Avatar-vue.spec.ts.snap b/test/components/__snapshots__/Avatar-vue.spec.ts.snap
index a241bf1581..8db373fd33 100644
--- a/test/components/__snapshots__/Avatar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Avatar-vue.spec.ts.snap
@@ -1,45 +1,45 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Avatar > renders with alt correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span class="font-medium leading-none text-muted truncate">BC</span></span>"`;
+exports[`Avatar > renders with alt correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span data-slot="fallback" class="font-medium leading-none text-muted truncate">BC</span></span>"`;
 
 exports[`Avatar > renders with as (object) correctly 1`] = `
-"<section class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base">
-  <p src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></p>
+"<section data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base">
+  <p src="https://github.com/benjamincanac.png" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></p>
 </section>"
 `;
 
-exports[`Avatar > renders with as (partial object) correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><p src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></p></span>"`;
+exports[`Avatar > renders with as (partial object) correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><p src="https://github.com/benjamincanac.png" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></p></span>"`;
 
-exports[`Avatar > renders with as correctly 1`] = `"<section class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span class="font-medium leading-none text-muted truncate">&nbsp;</span></section>"`;
+exports[`Avatar > renders with as correctly 1`] = `"<section data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span data-slot="fallback" class="font-medium leading-none text-muted truncate">&nbsp;</span></section>"`;
 
-exports[`Avatar > renders with chip correctly 1`] = `"<span class="relative inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span class="font-medium leading-none text-muted truncate">&nbsp;</span><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute">1</span></span>"`;
+exports[`Avatar > renders with chip correctly 1`] = `"<span data-slot="root" class="relative inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span data-slot="fallback" class="font-medium leading-none text-muted truncate">&nbsp;</span><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute">1</span></span>"`;
 
-exports[`Avatar > renders with class correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle size-8 text-base bg-default"><span class="font-medium leading-none text-muted truncate">&nbsp;</span></span>"`;
+exports[`Avatar > renders with class correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle size-8 text-base bg-default"><span data-slot="fallback" class="font-medium leading-none text-muted truncate">&nbsp;</span></span>"`;
 
-exports[`Avatar > renders with default slot correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base">🇫🇷</span>"`;
+exports[`Avatar > renders with default slot correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base">🇫🇷</span>"`;
 
-exports[`Avatar > renders with icon correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>"`;
+exports[`Avatar > renders with icon correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>"`;
 
-exports[`Avatar > renders with size 2xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px]"><img src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with size 2xl correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px]"><img src="https://github.com/benjamincanac.png" width="44" height="44" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size 2xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px]"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with size 2xs correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px]"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size 3xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl"><img src="https://github.com/benjamincanac.png" width="48" height="48" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with size 3xl correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl"><img src="https://github.com/benjamincanac.png" width="48" height="48" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size 3xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px]"><img src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with size 3xs correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px]"><img src="https://github.com/benjamincanac.png" width="16" height="16" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size lg correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg"><img src="https://github.com/benjamincanac.png" width="36" height="36" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with size lg correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg"><img src="https://github.com/benjamincanac.png" width="36" height="36" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size md correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><img src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with size md correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><img src="https://github.com/benjamincanac.png" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size sm correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm"><img src="https://github.com/benjamincanac.png" width="28" height="28" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with size sm correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm"><img src="https://github.com/benjamincanac.png" width="28" height="28" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl"><img src="https://github.com/benjamincanac.png" width="40" height="40" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with size xl correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl"><img src="https://github.com/benjamincanac.png" width="40" height="40" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs"><img src="https://github.com/benjamincanac.png" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with size xs correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs"><img src="https://github.com/benjamincanac.png" width="24" height="24" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with src correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><img src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with src correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><img src="https://github.com/benjamincanac.png" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with text correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span class="font-medium leading-none text-muted truncate">+1</span></span>"`;
+exports[`Avatar > renders with text correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span data-slot="fallback" class="font-medium leading-none text-muted truncate">+1</span></span>"`;
 
-exports[`Avatar > renders with ui correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span class="leading-none text-muted truncate font-bold">&nbsp;</span></span>"`;
+exports[`Avatar > renders with ui correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span data-slot="fallback" class="leading-none text-muted truncate font-bold">&nbsp;</span></span>"`;
diff --git a/test/components/__snapshots__/Avatar.spec.ts.snap b/test/components/__snapshots__/Avatar.spec.ts.snap
index c094008b8b..ea539e06d6 100644
--- a/test/components/__snapshots__/Avatar.spec.ts.snap
+++ b/test/components/__snapshots__/Avatar.spec.ts.snap
@@ -1,45 +1,45 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Avatar > renders with alt correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span class="font-medium leading-none text-muted truncate">BC</span></span>"`;
+exports[`Avatar > renders with alt correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span data-slot="fallback" class="font-medium leading-none text-muted truncate">BC</span></span>"`;
 
 exports[`Avatar > renders with as (object) correctly 1`] = `
-"<section class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base">
-  <p src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></p>
+"<section data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base">
+  <p src="https://github.com/benjamincanac.png" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></p>
 </section>"
 `;
 
-exports[`Avatar > renders with as (partial object) correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><p src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></p></span>"`;
+exports[`Avatar > renders with as (partial object) correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><p src="https://github.com/benjamincanac.png" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></p></span>"`;
 
-exports[`Avatar > renders with as correctly 1`] = `"<section class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span class="font-medium leading-none text-muted truncate">&nbsp;</span></section>"`;
+exports[`Avatar > renders with as correctly 1`] = `"<section data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span data-slot="fallback" class="font-medium leading-none text-muted truncate">&nbsp;</span></section>"`;
 
-exports[`Avatar > renders with chip correctly 1`] = `"<span class="relative inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span class="font-medium leading-none text-muted truncate">&nbsp;</span><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute">1</span></span>"`;
+exports[`Avatar > renders with chip correctly 1`] = `"<span data-slot="root" class="relative inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span data-slot="fallback" class="font-medium leading-none text-muted truncate">&nbsp;</span><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute">1</span></span>"`;
 
-exports[`Avatar > renders with class correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle size-8 text-base bg-default"><span class="font-medium leading-none text-muted truncate">&nbsp;</span></span>"`;
+exports[`Avatar > renders with class correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle size-8 text-base bg-default"><span data-slot="fallback" class="font-medium leading-none text-muted truncate">&nbsp;</span></span>"`;
 
-exports[`Avatar > renders with default slot correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base">🇫🇷</span>"`;
+exports[`Avatar > renders with default slot correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base">🇫🇷</span>"`;
 
-exports[`Avatar > renders with icon correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span class="iconify i-lucide:image text-muted shrink-0" aria-hidden="true"></span></span>"`;
+exports[`Avatar > renders with icon correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span class="iconify i-lucide:image text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>"`;
 
-exports[`Avatar > renders with size 2xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px]"><img src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with size 2xl correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px]"><img src="https://github.com/benjamincanac.png" width="44" height="44" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size 2xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px]"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with size 2xs correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px]"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size 3xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl"><img src="https://github.com/benjamincanac.png" width="48" height="48" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with size 3xl correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl"><img src="https://github.com/benjamincanac.png" width="48" height="48" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size 3xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px]"><img src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with size 3xs correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px]"><img src="https://github.com/benjamincanac.png" width="16" height="16" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size lg correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg"><img src="https://github.com/benjamincanac.png" width="36" height="36" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with size lg correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg"><img src="https://github.com/benjamincanac.png" width="36" height="36" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size md correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><img src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with size md correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><img src="https://github.com/benjamincanac.png" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size sm correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm"><img src="https://github.com/benjamincanac.png" width="28" height="28" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with size sm correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm"><img src="https://github.com/benjamincanac.png" width="28" height="28" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl"><img src="https://github.com/benjamincanac.png" width="40" height="40" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with size xl correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl"><img src="https://github.com/benjamincanac.png" width="40" height="40" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs"><img src="https://github.com/benjamincanac.png" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with size xs correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs"><img src="https://github.com/benjamincanac.png" width="24" height="24" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with src correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><img src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with src correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><img src="https://github.com/benjamincanac.png" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with text correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span class="font-medium leading-none text-muted truncate">+1</span></span>"`;
+exports[`Avatar > renders with text correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span data-slot="fallback" class="font-medium leading-none text-muted truncate">+1</span></span>"`;
 
-exports[`Avatar > renders with ui correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span class="leading-none text-muted truncate font-bold">&nbsp;</span></span>"`;
+exports[`Avatar > renders with ui correctly 1`] = `"<span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span data-slot="fallback" class="leading-none text-muted truncate font-bold">&nbsp;</span></span>"`;
diff --git a/test/components/__snapshots__/AvatarGroup-vue.spec.ts.snap b/test/components/__snapshots__/AvatarGroup-vue.spec.ts.snap
index 6c2b636591..233735c673 100644
--- a/test/components/__snapshots__/AvatarGroup-vue.spec.ts.snap
+++ b/test/components/__snapshots__/AvatarGroup-vue.spec.ts.snap
@@ -1,77 +1,77 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`AvatarGroup > renders with as correctly 1`] = `"<span class="inline-flex flex-row-reverse justify-end"><!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></span>"`;
+exports[`AvatarGroup > renders with as correctly 1`] = `"<span data-slot="root" class="inline-flex flex-row-reverse justify-end"><!--v-if--><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span>"`;
 
 exports[`AvatarGroup > renders with class correctly 1`] = `
-"<div class="inline-flex flex-row-reverse justify-start">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-slot="root" class="inline-flex flex-row-reverse justify-start">
+  <!--v-if--><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with default slot correctly 1`] = `
-"<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-slot="root" class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
-exports[`AvatarGroup > renders with max correctly 1`] = `"<div class="inline-flex flex-row-reverse justify-end"><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><span class="font-medium leading-none text-muted truncate">+1</span></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></div>"`;
+exports[`AvatarGroup > renders with max correctly 1`] = `"<div data-slot="root" class="inline-flex flex-row-reverse justify-end"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><span data-slot="fallback" class="font-medium leading-none text-muted truncate">+1</span></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>"`;
 
 exports[`AvatarGroup > renders with size 2xl correctly 1`] = `
-"<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-11 text-[22px] relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-11 text-[22px] relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-11 text-[22px] relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-slot="root" class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-11 text-[22px] relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-11 text-[22px] relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-11 text-[22px] relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size 2xs correctly 1`] = `
-"<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-5 text-[10px] relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-5 text-[10px] relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-5 text-[10px] relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-slot="root" class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-5 text-[10px] relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-5 text-[10px] relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-5 text-[10px] relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size 3xl correctly 1`] = `
-"<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-12 text-2xl relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-12 text-2xl relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-12 text-2xl relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-slot="root" class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-12 text-2xl relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-12 text-2xl relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-12 text-2xl relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size 3xs correctly 1`] = `
-"<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-4 text-[8px] relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-4 text-[8px] relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-4 text-[8px] relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-slot="root" class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-4 text-[8px] relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-4 text-[8px] relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-4 text-[8px] relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size lg correctly 1`] = `
-"<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-9 text-lg relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-9 text-lg relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-9 text-lg relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-slot="root" class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-9 text-lg relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-9 text-lg relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-9 text-lg relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size md correctly 1`] = `
-"<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-slot="root" class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size sm correctly 1`] = `
-"<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-7 text-sm relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-7 text-sm relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-7 text-sm relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-slot="root" class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-7 text-sm relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-7 text-sm relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-7 text-sm relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size xl correctly 1`] = `
-"<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-10 text-xl relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-10 text-xl relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-10 text-xl relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-slot="root" class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-10 text-xl relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-10 text-xl relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-10 text-xl relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size xs correctly 1`] = `
-"<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-6 text-xs relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-6 text-xs relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-6 text-xs relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-slot="root" class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-6 text-xs relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-6 text-xs relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-6 text-xs relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with ui correctly 1`] = `
-"<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative ring-bg first:me-0 ring-2 -me-1.5 rounded-lg"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative ring-bg first:me-0 ring-2 -me-1.5 rounded-lg"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative ring-bg first:me-0 ring-2 -me-1.5 rounded-lg"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-slot="root" class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative ring-bg first:me-0 ring-2 -me-1.5 rounded-lg"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative ring-bg first:me-0 ring-2 -me-1.5 rounded-lg"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative ring-bg first:me-0 ring-2 -me-1.5 rounded-lg"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
diff --git a/test/components/__snapshots__/AvatarGroup.spec.ts.snap b/test/components/__snapshots__/AvatarGroup.spec.ts.snap
index 6c2b636591..233735c673 100644
--- a/test/components/__snapshots__/AvatarGroup.spec.ts.snap
+++ b/test/components/__snapshots__/AvatarGroup.spec.ts.snap
@@ -1,77 +1,77 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`AvatarGroup > renders with as correctly 1`] = `"<span class="inline-flex flex-row-reverse justify-end"><!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></span>"`;
+exports[`AvatarGroup > renders with as correctly 1`] = `"<span data-slot="root" class="inline-flex flex-row-reverse justify-end"><!--v-if--><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span>"`;
 
 exports[`AvatarGroup > renders with class correctly 1`] = `
-"<div class="inline-flex flex-row-reverse justify-start">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-slot="root" class="inline-flex flex-row-reverse justify-start">
+  <!--v-if--><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with default slot correctly 1`] = `
-"<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-slot="root" class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
-exports[`AvatarGroup > renders with max correctly 1`] = `"<div class="inline-flex flex-row-reverse justify-end"><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><span class="font-medium leading-none text-muted truncate">+1</span></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></div>"`;
+exports[`AvatarGroup > renders with max correctly 1`] = `"<div data-slot="root" class="inline-flex flex-row-reverse justify-end"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><span data-slot="fallback" class="font-medium leading-none text-muted truncate">+1</span></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>"`;
 
 exports[`AvatarGroup > renders with size 2xl correctly 1`] = `
-"<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-11 text-[22px] relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-11 text-[22px] relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-11 text-[22px] relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-slot="root" class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-11 text-[22px] relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-11 text-[22px] relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-11 text-[22px] relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size 2xs correctly 1`] = `
-"<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-5 text-[10px] relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-5 text-[10px] relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-5 text-[10px] relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-slot="root" class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-5 text-[10px] relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-5 text-[10px] relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-5 text-[10px] relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size 3xl correctly 1`] = `
-"<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-12 text-2xl relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-12 text-2xl relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-12 text-2xl relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-slot="root" class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-12 text-2xl relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-12 text-2xl relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-12 text-2xl relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size 3xs correctly 1`] = `
-"<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-4 text-[8px] relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-4 text-[8px] relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-4 text-[8px] relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-slot="root" class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-4 text-[8px] relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-4 text-[8px] relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-4 text-[8px] relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size lg correctly 1`] = `
-"<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-9 text-lg relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-9 text-lg relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-9 text-lg relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-slot="root" class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-9 text-lg relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-9 text-lg relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-9 text-lg relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size md correctly 1`] = `
-"<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-slot="root" class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size sm correctly 1`] = `
-"<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-7 text-sm relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-7 text-sm relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-7 text-sm relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-slot="root" class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-7 text-sm relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-7 text-sm relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-7 text-sm relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size xl correctly 1`] = `
-"<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-10 text-xl relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-10 text-xl relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-10 text-xl relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-slot="root" class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-10 text-xl relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-10 text-xl relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-10 text-xl relative rounded-full ring-bg first:me-0 ring-3 -me-2"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size xs correctly 1`] = `
-"<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-6 text-xs relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-6 text-xs relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-6 text-xs relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-slot="root" class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-6 text-xs relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-6 text-xs relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-6 text-xs relative rounded-full ring-bg first:me-0 ring -me-0.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with ui correctly 1`] = `
-"<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative ring-bg first:me-0 ring-2 -me-1.5 rounded-lg"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative ring-bg first:me-0 ring-2 -me-1.5 rounded-lg"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative ring-bg first:me-0 ring-2 -me-1.5 rounded-lg"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-slot="root" class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative ring-bg first:me-0 ring-2 -me-1.5 rounded-lg"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative ring-bg first:me-0 ring-2 -me-1.5 rounded-lg"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative ring-bg first:me-0 ring-2 -me-1.5 rounded-lg"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
 </div>"
 `;
diff --git a/test/components/__snapshots__/Badge-vue.spec.ts.snap b/test/components/__snapshots__/Badge-vue.spec.ts.snap
index 3a2efdfcc4..c7d0e3ae49 100644
--- a/test/components/__snapshots__/Badge-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Badge-vue.spec.ts.snap
@@ -1,122 +1,122 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Badge > renders with as correctly 1`] = `
-"<div class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted">
-  <!--v-if--><span class="truncate">Badge</span>
+"<div data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted">
+  <!--v-if--><span data-slot="label" class="truncate">Badge</span>
   <!--v-if-->
 </div>"
 `;
 
-exports[`Badge > renders with avatar and leadingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with avatar and leadingIcon correctly 1`] = `"<span data-slot="base" class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></span>"`;
 
 exports[`Badge > renders with avatar and trailingIcon correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>
-<!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg></span>"
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" width="16" height="16" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+<!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg></span>"
 `;
 
 exports[`Badge > renders with avatar correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" width="16" height="16" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with class correctly 1`] = `
-"<span class="inline-flex items-center text-xs px-2 py-1 gap-1 bg-primary text-inverted rounded-full font-bold"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="inline-flex items-center text-xs px-2 py-1 gap-1 bg-primary text-inverted rounded-full font-bold"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
-exports[`Badge > renders with default slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if-->Default slot<!--v-if--></span>"`;
+exports[`Badge > renders with default slot correctly 1`] = `"<span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if-->Default slot<!--v-if--></span>"`;
 
-exports[`Badge > renders with icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with icon correctly 1`] = `"<span data-slot="base" class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></span>"`;
 
 exports[`Badge > renders with label correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
-exports[`Badge > renders with leading and icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with leading and icon correctly 1`] = `"<span data-slot="base" class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></span>"`;
 
-exports[`Badge > renders with leading slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1">Leading slot<!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with leading slot correctly 1`] = `"<span data-slot="base" class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1">Leading slot<!--v-if--><!--v-if--></span>"`;
 
-exports[`Badge > renders with leadingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with leadingIcon correctly 1`] = `"<span data-slot="base" class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><!--v-if--><!--v-if--></span>"`;
 
 exports[`Badge > renders with neutral variant outline correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-default"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-default"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with neutral variant soft correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with neutral variant solid correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with neutral variant subtle correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant outline correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-primary ring ring-inset ring-primary/50"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-primary ring ring-inset ring-primary/50"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant soft correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant solid correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant subtle correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with size lg correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-sm px-2 py-1 gap-1.5 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-sm px-2 py-1 gap-1.5 rounded-md bg-primary text-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with size md correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with size sm correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm bg-primary text-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with size xl correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-base px-2.5 py-1 gap-1.5 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-base px-2.5 py-1 gap-1.5 rounded-md bg-primary text-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with size xs correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-[8px]/3 px-1 py-0.5 gap-1 rounded-sm bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-[8px]/3 px-1 py-0.5 gap-1 rounded-sm bg-primary text-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with square correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
-exports[`Badge > renders with trailing and icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><!--v-if--><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg></span>"`;
+exports[`Badge > renders with trailing and icon correctly 1`] = `"<span data-slot="base" class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><!--v-if--><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg></span>"`;
 
-exports[`Badge > renders with trailing slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><!--v-if--><!--v-if-->Trailing slot</span>"`;
+exports[`Badge > renders with trailing slot correctly 1`] = `"<span data-slot="base" class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><!--v-if--><!--v-if-->Trailing slot</span>"`;
 
-exports[`Badge > renders with trailingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><!--v-if--><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg></span>"`;
+exports[`Badge > renders with trailingIcon correctly 1`] = `"<span data-slot="base" class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><!--v-if--><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg></span>"`;
 
 exports[`Badge > renders with ui correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate font-bold">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span data-slot="label" class="truncate font-bold">Badge</span>
 <!--v-if--></span>"
 `;
diff --git a/test/components/__snapshots__/Badge.spec.ts.snap b/test/components/__snapshots__/Badge.spec.ts.snap
index b97f436eae..6b283f64c8 100644
--- a/test/components/__snapshots__/Badge.spec.ts.snap
+++ b/test/components/__snapshots__/Badge.spec.ts.snap
@@ -1,138 +1,138 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Badge > renders with as correctly 1`] = `
-"<div class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted">
-  <!--v-if--><span class="truncate">Badge</span>
+"<div data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted">
+  <!--v-if--><span data-slot="label" class="truncate">Badge</span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Badge > renders with avatar and leadingIcon correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><span class="iconify i-lucide:arrow-left shrink-0 size-4" aria-hidden="true"></span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><span class="iconify i-lucide:arrow-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with avatar and trailingIcon correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>
-<!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true"></span></span>"
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" width="16" height="16" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+<!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span></span>"
 `;
 
 exports[`Badge > renders with avatar correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" width="16" height="16" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with class correctly 1`] = `
-"<span class="inline-flex items-center text-xs px-2 py-1 gap-1 bg-primary text-inverted rounded-full font-bold"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="inline-flex items-center text-xs px-2 py-1 gap-1 bg-primary text-inverted rounded-full font-bold"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
-exports[`Badge > renders with default slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if-->Default slot<!--v-if--></span>"`;
+exports[`Badge > renders with default slot correctly 1`] = `"<span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if-->Default slot<!--v-if--></span>"`;
 
 exports[`Badge > renders with icon correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><span class="iconify i-lucide:rocket shrink-0 size-4" aria-hidden="true"></span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><span class="iconify i-lucide:rocket shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with label correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with leading and icon correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><span class="iconify i-lucide:arrow-left shrink-0 size-4" aria-hidden="true"></span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><span class="iconify i-lucide:arrow-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
 
-exports[`Badge > renders with leading slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1">Leading slot<!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with leading slot correctly 1`] = `"<span data-slot="base" class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1">Leading slot<!--v-if--><!--v-if--></span>"`;
 
 exports[`Badge > renders with leadingIcon correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><span class="iconify i-lucide:arrow-left shrink-0 size-4" aria-hidden="true"></span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><span class="iconify i-lucide:arrow-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with neutral variant outline correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-default"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-default"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with neutral variant soft correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with neutral variant solid correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with neutral variant subtle correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant outline correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-primary ring ring-inset ring-primary/50"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-primary ring ring-inset ring-primary/50"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant soft correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant solid correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant subtle correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with size lg correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-sm px-2 py-1 gap-1.5 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-sm px-2 py-1 gap-1.5 rounded-md bg-primary text-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with size md correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with size sm correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm bg-primary text-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with size xl correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-base px-2.5 py-1 gap-1.5 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-base px-2.5 py-1 gap-1.5 rounded-md bg-primary text-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with size xs correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-[8px]/3 px-1 py-0.5 gap-1 rounded-sm bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-[8px]/3 px-1 py-0.5 gap-1 rounded-sm bg-primary text-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with square correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><!--v-if--><span class="truncate">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
-exports[`Badge > renders with trailing and icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><!--v-if--><!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true"></span></span>"`;
+exports[`Badge > renders with trailing and icon correctly 1`] = `"<span data-slot="base" class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><!--v-if--><!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span></span>"`;
 
-exports[`Badge > renders with trailing slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><!--v-if--><!--v-if-->Trailing slot</span>"`;
+exports[`Badge > renders with trailing slot correctly 1`] = `"<span data-slot="base" class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><!--v-if--><!--v-if-->Trailing slot</span>"`;
 
-exports[`Badge > renders with trailingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><!--v-if--><!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true"></span></span>"`;
+exports[`Badge > renders with trailingIcon correctly 1`] = `"<span data-slot="base" class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><!--v-if--><!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span></span>"`;
 
 exports[`Badge > renders with ui correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate font-bold">Badge</span>
+"<span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span data-slot="label" class="truncate font-bold">Badge</span>
 <!--v-if--></span>"
 `;
diff --git a/test/components/__snapshots__/Banner-vue.spec.ts.snap b/test/components/__snapshots__/Banner-vue.spec.ts.snap
index a085674e8d..cc047d42c4 100644
--- a/test/components/__snapshots__/Banner-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Banner-vue.spec.ts.snap
@@ -1,17 +1,17 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Banner > renders with actions correctly 1`] = `
-"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary">
+"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary" data-slot="root">
   <!--v-if-->
-  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-0fc735df="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-0fc735df="" class="flex items-center gap-1.5 min-w-0"><svg data-v-0fc735df="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-inverted pointer-events-none"></svg>
-      <div data-v-0fc735df="" class="text-sm text-inverted font-medium truncate">Title</div>
-      <div data-v-0fc735df="" class="flex gap-1.5 shrink-0 isolate"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted">
-          <!--v-if--><span class="truncate">Learn more</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-0fc735df="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-0fc735df="" data-slot="center" class="flex items-center gap-1.5 min-w-0"><svg data-v-0fc735df="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="size-5 shrink-0 text-inverted pointer-events-none"></svg>
+      <div data-v-0fc735df="" data-slot="title" class="text-sm text-inverted font-medium truncate">Title</div>
+      <div data-v-0fc735df="" data-slot="actions" class="flex gap-1.5 shrink-0 isolate"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted">
+          <!--v-if--><span data-slot="label" class="truncate">Learn more</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
         </button></div>
     </div>
-    <div data-v-0fc735df="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-0fc735df="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
@@ -19,16 +19,16 @@ exports[`Banner > renders with actions correctly 1`] = `
 `;
 
 exports[`Banner > renders with actions slot correctly 1`] = `
-"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary">
+"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary" data-slot="root">
   <!--v-if-->
-  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-0fc735df="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-0fc735df="" class="flex items-center gap-1.5 min-w-0">
+  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-0fc735df="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-0fc735df="" data-slot="center" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
       <!--v-if-->
-      <div data-v-0fc735df="" class="flex gap-1.5 shrink-0 isolate">Actions slot</div>
+      <div data-v-0fc735df="" data-slot="actions" class="flex gap-1.5 shrink-0 isolate">Actions slot</div>
     </div>
-    <div data-v-0fc735df="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-0fc735df="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
@@ -36,16 +36,16 @@ exports[`Banner > renders with actions slot correctly 1`] = `
 `;
 
 exports[`Banner > renders with as correctly 1`] = `
-"<section data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary">
+"<section data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary" data-slot="root">
   <!--v-if-->
-  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-0fc735df="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-0fc735df="" class="flex items-center gap-1.5 min-w-0">
+  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-0fc735df="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-0fc735df="" data-slot="center" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fc735df="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-0fc735df="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
@@ -53,16 +53,16 @@ exports[`Banner > renders with as correctly 1`] = `
 `;
 
 exports[`Banner > renders with class correctly 1`] = `
-"<div data-v-0fc735df="" class="banner relative w-full transition-colors bg-primary z-10">
+"<div data-v-0fc735df="" class="banner relative w-full transition-colors bg-primary z-10" data-slot="root">
   <!--v-if-->
-  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-0fc735df="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-0fc735df="" class="flex items-center gap-1.5 min-w-0">
+  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-0fc735df="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-0fc735df="" data-slot="center" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fc735df="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-0fc735df="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
@@ -70,16 +70,16 @@ exports[`Banner > renders with class correctly 1`] = `
 `;
 
 exports[`Banner > renders with close correctly 1`] = `
-"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary">
+"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary" data-slot="root">
   <!--v-if-->
-  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-0fc735df="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-0fc735df="" class="flex items-center gap-1.5 min-w-0">
+  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-0fc735df="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-0fc735df="" data-slot="center" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fc735df="" class="lg:flex-1 flex items-center justify-end"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 active:bg-elevated focus:outline-none hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 text-inverted hover:bg-default/10 focus-visible:bg-default/10 -me-1.5 lg:me-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-v-0fc735df="" data-slot="right" class="lg:flex-1 flex items-center justify-end"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 active:bg-elevated focus:outline-none hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 text-inverted hover:bg-default/10 focus-visible:bg-default/10 -me-1.5 lg:me-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -88,31 +88,31 @@ exports[`Banner > renders with close correctly 1`] = `
 `;
 
 exports[`Banner > renders with close slot correctly 1`] = `
-"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary">
+"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary" data-slot="root">
   <!--v-if-->
-  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-0fc735df="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-0fc735df="" class="flex items-center gap-1.5 min-w-0">
+  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-0fc735df="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-0fc735df="" data-slot="center" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fc735df="" class="lg:flex-1 flex items-center justify-end">Close slot</div>
+    <div data-v-0fc735df="" data-slot="right" class="lg:flex-1 flex items-center justify-end">Close slot</div>
   </div>
 </div>"
 `;
 
 exports[`Banner > renders with closeIcon correctly 1`] = `
-"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary">
+"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary" data-slot="root">
   <!--v-if-->
-  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-0fc735df="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-0fc735df="" class="flex items-center gap-1.5 min-w-0">
+  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-0fc735df="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-0fc735df="" data-slot="center" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fc735df="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-0fc735df="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
@@ -120,15 +120,15 @@ exports[`Banner > renders with closeIcon correctly 1`] = `
 `;
 
 exports[`Banner > renders with icon correctly 1`] = `
-"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary">
+"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary" data-slot="root">
   <!--v-if-->
-  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-0fc735df="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-0fc735df="" class="flex items-center gap-1.5 min-w-0"><svg data-v-0fc735df="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-inverted pointer-events-none"></svg>
-      <div data-v-0fc735df="" class="text-sm text-inverted font-medium truncate">Title</div>
+  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-0fc735df="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-0fc735df="" data-slot="center" class="flex items-center gap-1.5 min-w-0"><svg data-v-0fc735df="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="size-5 shrink-0 text-inverted pointer-events-none"></svg>
+      <div data-v-0fc735df="" data-slot="title" class="text-sm text-inverted font-medium truncate">Title</div>
       <!--v-if-->
     </div>
-    <div data-v-0fc735df="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-0fc735df="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
@@ -136,16 +136,16 @@ exports[`Banner > renders with icon correctly 1`] = `
 `;
 
 exports[`Banner > renders with id correctly 1`] = `
-"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary">
+"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary" data-slot="root">
   <!--v-if-->
-  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-0fc735df="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-0fc735df="" class="flex items-center gap-1.5 min-w-0">
+  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-0fc735df="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-0fc735df="" data-slot="center" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fc735df="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-0fc735df="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
@@ -153,15 +153,15 @@ exports[`Banner > renders with id correctly 1`] = `
 `;
 
 exports[`Banner > renders with leading slot correctly 1`] = `
-"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary">
+"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary" data-slot="root">
   <!--v-if-->
-  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-0fc735df="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-0fc735df="" class="flex items-center gap-1.5 min-w-0">Leading slot
+  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-0fc735df="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-0fc735df="" data-slot="center" class="flex items-center gap-1.5 min-w-0">Leading slot
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fc735df="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-0fc735df="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
@@ -169,15 +169,15 @@ exports[`Banner > renders with leading slot correctly 1`] = `
 `;
 
 exports[`Banner > renders with neutral color correctly 1`] = `
-"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-inverted">
+"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-inverted" data-slot="root">
   <!--v-if-->
-  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-0fc735df="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-0fc735df="" class="flex items-center gap-1.5 min-w-0"><svg data-v-0fc735df="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-inverted pointer-events-none"></svg>
-      <div data-v-0fc735df="" class="text-sm text-inverted font-medium truncate">Title</div>
+  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-0fc735df="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-0fc735df="" data-slot="center" class="flex items-center gap-1.5 min-w-0"><svg data-v-0fc735df="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="size-5 shrink-0 text-inverted pointer-events-none"></svg>
+      <div data-v-0fc735df="" data-slot="title" class="text-sm text-inverted font-medium truncate">Title</div>
       <!--v-if-->
     </div>
-    <div data-v-0fc735df="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-0fc735df="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
@@ -185,15 +185,15 @@ exports[`Banner > renders with neutral color correctly 1`] = `
 `;
 
 exports[`Banner > renders with target correctly 1`] = `
-"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary hover:bg-primary/90"><a href="https://nuxt.com" tabindex="-1" target="_blank" class="focus:outline-none"><span data-v-0fc735df="" class="absolute inset-0" aria-hidden="true"></span></a>
-  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-0fc735df="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-0fc735df="" class="flex items-center gap-1.5 min-w-0">
+"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary hover:bg-primary/90" data-slot="root"><a href="https://nuxt.com" tabindex="-1" target="_blank" class="focus:outline-none"><span data-v-0fc735df="" class="absolute inset-0" aria-hidden="true"></span></a>
+  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-0fc735df="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-0fc735df="" data-slot="center" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fc735df="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-0fc735df="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
@@ -201,16 +201,16 @@ exports[`Banner > renders with target correctly 1`] = `
 `;
 
 exports[`Banner > renders with title correctly 1`] = `
-"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary">
+"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary" data-slot="root">
   <!--v-if-->
-  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-0fc735df="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-0fc735df="" class="flex items-center gap-1.5 min-w-0">
+  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-0fc735df="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-0fc735df="" data-slot="center" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
-      <div data-v-0fc735df="" class="text-sm text-inverted font-medium truncate">Title</div>
+      <div data-v-0fc735df="" data-slot="title" class="text-sm text-inverted font-medium truncate">Title</div>
       <!--v-if-->
     </div>
-    <div data-v-0fc735df="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-0fc735df="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
@@ -218,16 +218,16 @@ exports[`Banner > renders with title correctly 1`] = `
 `;
 
 exports[`Banner > renders with title slot correctly 1`] = `
-"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary">
+"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary" data-slot="root">
   <!--v-if-->
-  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-0fc735df="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-0fc735df="" class="flex items-center gap-1.5 min-w-0">
+  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-0fc735df="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-0fc735df="" data-slot="center" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
-      <div data-v-0fc735df="" class="text-sm text-inverted font-medium truncate">Title slot</div>
+      <div data-v-0fc735df="" data-slot="title" class="text-sm text-inverted font-medium truncate">Title slot</div>
       <!--v-if-->
     </div>
-    <div data-v-0fc735df="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-0fc735df="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
@@ -235,15 +235,15 @@ exports[`Banner > renders with title slot correctly 1`] = `
 `;
 
 exports[`Banner > renders with to correctly 1`] = `
-"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary hover:bg-primary/90"><a data-v-0fc735df="" href="/getting-started" tabindex="-1" class="focus:outline-none"><span data-v-0fc735df="" class="absolute inset-0" aria-hidden="true"></span></a>
-  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-0fc735df="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-0fc735df="" class="flex items-center gap-1.5 min-w-0">
+"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary hover:bg-primary/90" data-slot="root"><a data-v-0fc735df="" href="/getting-started" tabindex="-1" class="focus:outline-none"><span data-v-0fc735df="" class="absolute inset-0" aria-hidden="true"></span></a>
+  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-0fc735df="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-0fc735df="" data-slot="center" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fc735df="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-0fc735df="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
@@ -251,16 +251,16 @@ exports[`Banner > renders with to correctly 1`] = `
 `;
 
 exports[`Banner > renders with ui correctly 1`] = `
-"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary">
+"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary" data-slot="root">
   <!--v-if-->
-  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-12 gap-6">
-    <div data-v-0fc735df="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-0fc735df="" class="flex items-center gap-1.5 min-w-0">
+  <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-12 gap-6" data-slot="container">
+    <div data-v-0fc735df="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-0fc735df="" data-slot="center" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fc735df="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-0fc735df="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
diff --git a/test/components/__snapshots__/Banner.spec.ts.snap b/test/components/__snapshots__/Banner.spec.ts.snap
index dec74399a7..4560ce76d0 100644
--- a/test/components/__snapshots__/Banner.spec.ts.snap
+++ b/test/components/__snapshots__/Banner.spec.ts.snap
@@ -1,17 +1,17 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Banner > renders with actions correctly 1`] = `
-"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary">
+"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary" data-slot="root">
   <!--v-if-->
-  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-8f05efd1="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-8f05efd1="" class="flex items-center gap-1.5 min-w-0"><span data-v-8f05efd1="" class="iconify i-lucide:rocket size-5 shrink-0 text-inverted pointer-events-none" aria-hidden="true"></span>
-      <div data-v-8f05efd1="" class="text-sm text-inverted font-medium truncate">Title</div>
-      <div data-v-8f05efd1="" class="flex gap-1.5 shrink-0 isolate"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted">
-          <!--v-if--><span class="truncate">Learn more</span><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true"></span>
+  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-8f05efd1="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-8f05efd1="" data-slot="center" class="flex items-center gap-1.5 min-w-0"><span data-v-8f05efd1="" class="iconify i-lucide:rocket size-5 shrink-0 text-inverted pointer-events-none" aria-hidden="true" data-slot="icon"></span>
+      <div data-v-8f05efd1="" data-slot="title" class="text-sm text-inverted font-medium truncate">Title</div>
+      <div data-v-8f05efd1="" data-slot="actions" class="flex gap-1.5 shrink-0 isolate"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted">
+          <!--v-if--><span data-slot="label" class="truncate">Learn more</span><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
         </button></div>
     </div>
-    <div data-v-8f05efd1="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-8f05efd1="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
@@ -19,16 +19,16 @@ exports[`Banner > renders with actions correctly 1`] = `
 `;
 
 exports[`Banner > renders with actions slot correctly 1`] = `
-"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary">
+"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary" data-slot="root">
   <!--v-if-->
-  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-8f05efd1="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-8f05efd1="" class="flex items-center gap-1.5 min-w-0">
+  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-8f05efd1="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-8f05efd1="" data-slot="center" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
       <!--v-if-->
-      <div data-v-8f05efd1="" class="flex gap-1.5 shrink-0 isolate">Actions slot</div>
+      <div data-v-8f05efd1="" data-slot="actions" class="flex gap-1.5 shrink-0 isolate">Actions slot</div>
     </div>
-    <div data-v-8f05efd1="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-8f05efd1="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
@@ -36,16 +36,16 @@ exports[`Banner > renders with actions slot correctly 1`] = `
 `;
 
 exports[`Banner > renders with as correctly 1`] = `
-"<section data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary">
+"<section data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary" data-slot="root">
   <!--v-if-->
-  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-8f05efd1="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-8f05efd1="" class="flex items-center gap-1.5 min-w-0">
+  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-8f05efd1="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-8f05efd1="" data-slot="center" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-8f05efd1="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-8f05efd1="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
@@ -53,16 +53,16 @@ exports[`Banner > renders with as correctly 1`] = `
 `;
 
 exports[`Banner > renders with class correctly 1`] = `
-"<div data-v-8f05efd1="" class="banner relative w-full transition-colors bg-primary z-10">
+"<div data-v-8f05efd1="" class="banner relative w-full transition-colors bg-primary z-10" data-slot="root">
   <!--v-if-->
-  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-8f05efd1="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-8f05efd1="" class="flex items-center gap-1.5 min-w-0">
+  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-8f05efd1="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-8f05efd1="" data-slot="center" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-8f05efd1="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-8f05efd1="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
@@ -70,16 +70,16 @@ exports[`Banner > renders with class correctly 1`] = `
 `;
 
 exports[`Banner > renders with close correctly 1`] = `
-"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary">
+"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary" data-slot="root">
   <!--v-if-->
-  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-8f05efd1="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-8f05efd1="" class="flex items-center gap-1.5 min-w-0">
+  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-8f05efd1="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-8f05efd1="" data-slot="center" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-8f05efd1="" class="lg:flex-1 flex items-center justify-end"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 active:bg-elevated focus:outline-none hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 text-inverted hover:bg-default/10 focus-visible:bg-default/10 -me-1.5 lg:me-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <div data-v-8f05efd1="" data-slot="right" class="lg:flex-1 flex items-center justify-end"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 active:bg-elevated focus:outline-none hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 text-inverted hover:bg-default/10 focus-visible:bg-default/10 -me-1.5 lg:me-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -88,31 +88,31 @@ exports[`Banner > renders with close correctly 1`] = `
 `;
 
 exports[`Banner > renders with close slot correctly 1`] = `
-"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary">
+"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary" data-slot="root">
   <!--v-if-->
-  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-8f05efd1="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-8f05efd1="" class="flex items-center gap-1.5 min-w-0">
+  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-8f05efd1="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-8f05efd1="" data-slot="center" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-8f05efd1="" class="lg:flex-1 flex items-center justify-end">Close slot</div>
+    <div data-v-8f05efd1="" data-slot="right" class="lg:flex-1 flex items-center justify-end">Close slot</div>
   </div>
 </div>"
 `;
 
 exports[`Banner > renders with closeIcon correctly 1`] = `
-"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary">
+"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary" data-slot="root">
   <!--v-if-->
-  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-8f05efd1="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-8f05efd1="" class="flex items-center gap-1.5 min-w-0">
+  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-8f05efd1="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-8f05efd1="" data-slot="center" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-8f05efd1="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-8f05efd1="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
@@ -120,15 +120,15 @@ exports[`Banner > renders with closeIcon correctly 1`] = `
 `;
 
 exports[`Banner > renders with icon correctly 1`] = `
-"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary">
+"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary" data-slot="root">
   <!--v-if-->
-  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-8f05efd1="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-8f05efd1="" class="flex items-center gap-1.5 min-w-0"><span data-v-8f05efd1="" class="iconify i-lucide:rocket size-5 shrink-0 text-inverted pointer-events-none" aria-hidden="true"></span>
-      <div data-v-8f05efd1="" class="text-sm text-inverted font-medium truncate">Title</div>
+  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-8f05efd1="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-8f05efd1="" data-slot="center" class="flex items-center gap-1.5 min-w-0"><span data-v-8f05efd1="" class="iconify i-lucide:rocket size-5 shrink-0 text-inverted pointer-events-none" aria-hidden="true" data-slot="icon"></span>
+      <div data-v-8f05efd1="" data-slot="title" class="text-sm text-inverted font-medium truncate">Title</div>
       <!--v-if-->
     </div>
-    <div data-v-8f05efd1="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-8f05efd1="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
@@ -136,16 +136,16 @@ exports[`Banner > renders with icon correctly 1`] = `
 `;
 
 exports[`Banner > renders with id correctly 1`] = `
-"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary">
+"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary" data-slot="root">
   <!--v-if-->
-  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-8f05efd1="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-8f05efd1="" class="flex items-center gap-1.5 min-w-0">
+  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-8f05efd1="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-8f05efd1="" data-slot="center" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-8f05efd1="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-8f05efd1="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
@@ -153,15 +153,15 @@ exports[`Banner > renders with id correctly 1`] = `
 `;
 
 exports[`Banner > renders with leading slot correctly 1`] = `
-"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary">
+"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary" data-slot="root">
   <!--v-if-->
-  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-8f05efd1="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-8f05efd1="" class="flex items-center gap-1.5 min-w-0">Leading slot
+  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-8f05efd1="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-8f05efd1="" data-slot="center" class="flex items-center gap-1.5 min-w-0">Leading slot
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-8f05efd1="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-8f05efd1="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
@@ -169,15 +169,15 @@ exports[`Banner > renders with leading slot correctly 1`] = `
 `;
 
 exports[`Banner > renders with neutral color correctly 1`] = `
-"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-inverted">
+"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-inverted" data-slot="root">
   <!--v-if-->
-  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-8f05efd1="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-8f05efd1="" class="flex items-center gap-1.5 min-w-0"><span data-v-8f05efd1="" class="iconify i-lucide:rocket size-5 shrink-0 text-inverted pointer-events-none" aria-hidden="true"></span>
-      <div data-v-8f05efd1="" class="text-sm text-inverted font-medium truncate">Title</div>
+  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-8f05efd1="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-8f05efd1="" data-slot="center" class="flex items-center gap-1.5 min-w-0"><span data-v-8f05efd1="" class="iconify i-lucide:rocket size-5 shrink-0 text-inverted pointer-events-none" aria-hidden="true" data-slot="icon"></span>
+      <div data-v-8f05efd1="" data-slot="title" class="text-sm text-inverted font-medium truncate">Title</div>
       <!--v-if-->
     </div>
-    <div data-v-8f05efd1="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-8f05efd1="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
@@ -185,15 +185,15 @@ exports[`Banner > renders with neutral color correctly 1`] = `
 `;
 
 exports[`Banner > renders with target correctly 1`] = `
-"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary hover:bg-primary/90"><a href="https://nuxt.com" tabindex="-1" rel="noopener noreferrer" target="_blank" class="focus:outline-none"><span data-v-8f05efd1="" class="absolute inset-0" aria-hidden="true"></span></a>
-  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-8f05efd1="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-8f05efd1="" class="flex items-center gap-1.5 min-w-0">
+"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary hover:bg-primary/90" data-slot="root"><a href="https://nuxt.com" tabindex="-1" rel="noopener noreferrer" target="_blank" class="focus:outline-none"><span data-v-8f05efd1="" class="absolute inset-0" aria-hidden="true"></span></a>
+  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-8f05efd1="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-8f05efd1="" data-slot="center" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-8f05efd1="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-8f05efd1="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
@@ -201,16 +201,16 @@ exports[`Banner > renders with target correctly 1`] = `
 `;
 
 exports[`Banner > renders with title correctly 1`] = `
-"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary">
+"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary" data-slot="root">
   <!--v-if-->
-  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-8f05efd1="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-8f05efd1="" class="flex items-center gap-1.5 min-w-0">
+  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-8f05efd1="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-8f05efd1="" data-slot="center" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
-      <div data-v-8f05efd1="" class="text-sm text-inverted font-medium truncate">Title</div>
+      <div data-v-8f05efd1="" data-slot="title" class="text-sm text-inverted font-medium truncate">Title</div>
       <!--v-if-->
     </div>
-    <div data-v-8f05efd1="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-8f05efd1="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
@@ -218,16 +218,16 @@ exports[`Banner > renders with title correctly 1`] = `
 `;
 
 exports[`Banner > renders with title slot correctly 1`] = `
-"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary">
+"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary" data-slot="root">
   <!--v-if-->
-  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-8f05efd1="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-8f05efd1="" class="flex items-center gap-1.5 min-w-0">
+  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-8f05efd1="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-8f05efd1="" data-slot="center" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
-      <div data-v-8f05efd1="" class="text-sm text-inverted font-medium truncate">Title slot</div>
+      <div data-v-8f05efd1="" data-slot="title" class="text-sm text-inverted font-medium truncate">Title slot</div>
       <!--v-if-->
     </div>
-    <div data-v-8f05efd1="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-8f05efd1="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
@@ -235,15 +235,15 @@ exports[`Banner > renders with title slot correctly 1`] = `
 `;
 
 exports[`Banner > renders with to correctly 1`] = `
-"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary hover:bg-primary/90"><a href="/getting-started" tabindex="-1" class="focus:outline-none"><span data-v-8f05efd1="" class="absolute inset-0" aria-hidden="true"></span></a>
-  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
-    <div data-v-8f05efd1="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-8f05efd1="" class="flex items-center gap-1.5 min-w-0">
+"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary hover:bg-primary/90" data-slot="root"><a href="/getting-started" tabindex="-1" class="focus:outline-none"><span data-v-8f05efd1="" class="absolute inset-0" aria-hidden="true"></span></a>
+  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
+    <div data-v-8f05efd1="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-8f05efd1="" data-slot="center" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-8f05efd1="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-8f05efd1="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
@@ -251,16 +251,16 @@ exports[`Banner > renders with to correctly 1`] = `
 `;
 
 exports[`Banner > renders with ui correctly 1`] = `
-"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary">
+"<div data-v-8f05efd1="" class="banner relative z-50 w-full transition-colors bg-primary" data-slot="root">
   <!--v-if-->
-  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-12 gap-6">
-    <div data-v-8f05efd1="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
-    <div data-v-8f05efd1="" class="flex items-center gap-1.5 min-w-0">
+  <div data-v-8f05efd1="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-12 gap-6" data-slot="container">
+    <div data-v-8f05efd1="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-8f05efd1="" data-slot="center" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-8f05efd1="" class="lg:flex-1 flex items-center justify-end">
+    <div data-v-8f05efd1="" data-slot="right" class="lg:flex-1 flex items-center justify-end">
       <!--v-if-->
     </div>
   </div>
diff --git a/test/components/__snapshots__/BlogPost-vue.spec.ts.snap b/test/components/__snapshots__/BlogPost-vue.spec.ts.snap
index fc8a5f7f8f..40e21f00c1 100644
--- a/test/components/__snapshots__/BlogPost-vue.spec.ts.snap
+++ b/test/components/__snapshots__/BlogPost-vue.spec.ts.snap
@@ -1,20 +1,20 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`BlogPost > renders with as correctly 1`] = `
-"<section data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -24,19 +24,19 @@ exports[`BlogPost > renders with as correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with author correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -46,16 +46,16 @@ exports[`BlogPost > renders with author correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with authors correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div class="inline-flex flex-row-reverse justify-end">
-        <!--v-if--><button type="button" class="relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><img src="https://github.com/atinux.png" alt="atinux" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></button><button type="button" class="relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></button>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-slot="root" class="inline-flex flex-row-reverse justify-end">
+        <!--v-if--><button type="button" data-slot="base" class="relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><img src="https://github.com/atinux.png" alt="atinux" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></button><button type="button" data-slot="base" class="relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></button>
       </div>
     </div>
   </div>
@@ -64,26 +64,26 @@ exports[`BlogPost > renders with authors correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with authors slot correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">Authors slot</div>
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">Authors slot</div>
   </div>
   <!--v-if-->
 </article>"
 `;
 
 exports[`BlogPost > renders with badge correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
     <!--v-if-->
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
       <!--v-if-->
     </div>
@@ -96,11 +96,11 @@ exports[`BlogPost > renders with badge correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with badge object correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
     <!--v-if-->
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
       <!--v-if-->
     </div>
@@ -113,18 +113,18 @@ exports[`BlogPost > renders with badge object correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with badge slot correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2">Badge slot<time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time></div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2">Badge slot<time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time></div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -134,28 +134,28 @@ exports[`BlogPost > renders with badge slot correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with body slot correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>Body slot</div>
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>Body slot</div>
   <!--v-if-->
 </article>"
 `;
 
 exports[`BlogPost > renders with class correctly 1`] = `
-"<article data-orientation="vertical" class="group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50 absolute">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50 absolute">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -165,12 +165,12 @@ exports[`BlogPost > renders with class correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with date correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
     <!--v-if-->
-    <div class="flex items-center gap-2 mb-2">
-      <!--v-if--><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2">
+      <!--v-if--><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -181,20 +181,20 @@ exports[`BlogPost > renders with date correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with date slot correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Date slot</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Date slot</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -204,13 +204,13 @@ exports[`BlogPost > renders with date slot correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with description correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -218,20 +218,20 @@ exports[`BlogPost > renders with description correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with description slot correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description slot</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description slot</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -241,43 +241,43 @@ exports[`BlogPost > renders with description slot correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with footer slot correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
   </div>
-  <div class="">Footer slot</div>
+  <div data-slot="footer" class="">Footer slot</div>
 </article>"
 `;
 
 exports[`BlogPost > renders with header slot correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none">Header slot</div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none">Header slot</div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -287,9 +287,9 @@ exports[`BlogPost > renders with header slot correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with image correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
@@ -301,20 +301,20 @@ exports[`BlogPost > renders with image correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with orientation horizontal correctly 1`] = `
-"<article data-orientation="horizontal" class="relative group/blog-post flex flex-col rounded-lg overflow-hidden lg:grid lg:grid-cols-2 lg:items-center gap-x-8 bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col justify-center p-4 sm:p-6 lg:px-0"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="horizontal" data-slot="root" class="relative group/blog-post flex flex-col rounded-lg overflow-hidden lg:grid lg:grid-cols-2 lg:items-center gap-x-8 bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col justify-center p-4 sm:p-6 lg:px-0"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -324,20 +324,20 @@ exports[`BlogPost > renders with orientation horizontal correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with orientation vertical correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -347,12 +347,12 @@ exports[`BlogPost > renders with orientation vertical correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with title correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
     <!--v-if-->
     <!--v-if-->
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -361,20 +361,20 @@ exports[`BlogPost > renders with title correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with title slot correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title slot" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title slot</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title slot" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title slot</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -384,9 +384,9 @@ exports[`BlogPost > renders with title slot correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with to & image correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Post link" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Post link" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
@@ -397,9 +397,9 @@ exports[`BlogPost > renders with to & image correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with to correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Post link" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Post link" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
@@ -410,20 +410,20 @@ exports[`BlogPost > renders with to correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with ui correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -433,20 +433,20 @@ exports[`BlogPost > renders with ui correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with variant ghost correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none shadow-lg rounded-lg group-hover/blog-post:shadow-none transition-all group-hover/blog-post:rounded-b-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none shadow-lg rounded-lg group-hover/blog-post:shadow-none transition-all group-hover/blog-post:rounded-b-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -456,20 +456,20 @@ exports[`BlogPost > renders with variant ghost correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with variant naked correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col p-0 sm:p-0 transition">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none shadow-lg rounded-lg"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col p-0 sm:p-0 transition">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none shadow-lg rounded-lg"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -479,20 +479,20 @@ exports[`BlogPost > renders with variant naked correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with variant outline correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -502,20 +502,20 @@ exports[`BlogPost > renders with variant outline correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with variant soft correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-elevated/50 transition hover:bg-elevated">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-muted">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-toned">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-elevated/50 transition hover:bg-elevated">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-muted">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-toned">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -525,20 +525,20 @@ exports[`BlogPost > renders with variant soft correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with variant subtle correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-elevated/50 ring ring-default transition hover:bg-elevated hover:ring-accented">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-muted">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-toned">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-elevated/50 ring ring-default transition hover:bg-elevated hover:ring-accented">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-muted">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-toned">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
diff --git a/test/components/__snapshots__/BlogPost.spec.ts.snap b/test/components/__snapshots__/BlogPost.spec.ts.snap
index 54f4ec9829..b0b81376ba 100644
--- a/test/components/__snapshots__/BlogPost.spec.ts.snap
+++ b/test/components/__snapshots__/BlogPost.spec.ts.snap
@@ -1,20 +1,20 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`BlogPost > renders with as correctly 1`] = `
-"<section data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -24,19 +24,19 @@ exports[`BlogPost > renders with as correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with author correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -46,16 +46,16 @@ exports[`BlogPost > renders with author correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with authors correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div class="inline-flex flex-row-reverse justify-end">
-        <!--v-if--><button type="button" class="relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><img src="https://github.com/atinux.png" alt="atinux" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></button><button type="button" class="relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></button>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-slot="root" class="inline-flex flex-row-reverse justify-end">
+        <!--v-if--><button type="button" data-slot="base" class="relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><img src="https://github.com/atinux.png" alt="atinux" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></button><button type="button" data-slot="base" class="relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></button>
       </div>
     </div>
   </div>
@@ -64,26 +64,26 @@ exports[`BlogPost > renders with authors correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with authors slot correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">Authors slot</div>
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">Authors slot</div>
   </div>
   <!--v-if-->
 </article>"
 `;
 
 exports[`BlogPost > renders with badge correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
     <!--v-if-->
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
       <!--v-if-->
     </div>
@@ -96,11 +96,11 @@ exports[`BlogPost > renders with badge correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with badge object correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
     <!--v-if-->
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
       <!--v-if-->
     </div>
@@ -113,18 +113,18 @@ exports[`BlogPost > renders with badge object correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with badge slot correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2">Badge slot<time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time></div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2">Badge slot<time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time></div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -134,28 +134,28 @@ exports[`BlogPost > renders with badge slot correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with body slot correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>Body slot</div>
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>Body slot</div>
   <!--v-if-->
 </article>"
 `;
 
 exports[`BlogPost > renders with class correctly 1`] = `
-"<article data-orientation="vertical" class="group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50 absolute">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50 absolute">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -165,12 +165,12 @@ exports[`BlogPost > renders with class correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with date correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
     <!--v-if-->
-    <div class="flex items-center gap-2 mb-2">
-      <!--v-if--><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2">
+      <!--v-if--><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -181,20 +181,20 @@ exports[`BlogPost > renders with date correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with date slot correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Date slot</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Date slot</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -204,13 +204,13 @@ exports[`BlogPost > renders with date slot correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with description correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -218,20 +218,20 @@ exports[`BlogPost > renders with description correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with description slot correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description slot</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description slot</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -241,43 +241,43 @@ exports[`BlogPost > renders with description slot correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with footer slot correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
   </div>
-  <div class="">Footer slot</div>
+  <div data-slot="footer" class="">Footer slot</div>
 </article>"
 `;
 
 exports[`BlogPost > renders with header slot correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none">Header slot</div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none">Header slot</div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -287,9 +287,9 @@ exports[`BlogPost > renders with header slot correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with image correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
@@ -301,20 +301,20 @@ exports[`BlogPost > renders with image correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with orientation horizontal correctly 1`] = `
-"<article data-orientation="horizontal" class="relative group/blog-post flex flex-col rounded-lg overflow-hidden lg:grid lg:grid-cols-2 lg:items-center gap-x-8 bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col justify-center p-4 sm:p-6 lg:px-0"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="horizontal" data-slot="root" class="relative group/blog-post flex flex-col rounded-lg overflow-hidden lg:grid lg:grid-cols-2 lg:items-center gap-x-8 bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col justify-center p-4 sm:p-6 lg:px-0"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -324,20 +324,20 @@ exports[`BlogPost > renders with orientation horizontal correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with orientation vertical correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -347,12 +347,12 @@ exports[`BlogPost > renders with orientation vertical correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with title correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
     <!--v-if-->
     <!--v-if-->
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -361,20 +361,20 @@ exports[`BlogPost > renders with title correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with title slot correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title slot" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title slot</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title slot" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title slot</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -384,9 +384,9 @@ exports[`BlogPost > renders with title slot correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with to & image correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Post link" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Post link" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
@@ -397,9 +397,9 @@ exports[`BlogPost > renders with to & image correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with to correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
   <!--v-if-->
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Post link" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Post link" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
@@ -410,20 +410,20 @@ exports[`BlogPost > renders with to correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with ui correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -433,20 +433,20 @@ exports[`BlogPost > renders with ui correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with variant ghost correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none shadow-lg rounded-lg group-hover/blog-post:shadow-none transition-all group-hover/blog-post:rounded-b-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none shadow-lg rounded-lg group-hover/blog-post:shadow-none transition-all group-hover/blog-post:rounded-b-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -456,20 +456,20 @@ exports[`BlogPost > renders with variant ghost correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with variant naked correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col p-0 sm:p-0 transition">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none shadow-lg rounded-lg"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col p-0 sm:p-0 transition">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none shadow-lg rounded-lg"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -479,20 +479,20 @@ exports[`BlogPost > renders with variant naked correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with variant outline correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-toned">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-muted">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -502,20 +502,20 @@ exports[`BlogPost > renders with variant outline correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with variant soft correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-elevated/50 transition hover:bg-elevated">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-muted">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-toned">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-elevated/50 transition hover:bg-elevated">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-muted">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-toned">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
@@ -525,20 +525,20 @@ exports[`BlogPost > renders with variant soft correctly 1`] = `
 `;
 
 exports[`BlogPost > renders with variant subtle correctly 1`] = `
-"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-elevated/50 ring ring-default transition hover:bg-elevated hover:ring-accented">
-  <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
-  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" class="text-sm text-muted">Jan 1, 2024</time>
-    </div>
-    <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-    <div class="mt-1 text-base text-pretty text-toned">Description</div>
-    <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-      <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="">
+"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-elevated/50 ring ring-default transition hover:bg-elevated hover:ring-accented">
+  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
+  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-muted">Jan 1, 2024</time>
+    </div>
+    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+    <div data-slot="description" class="mt-1 text-base text-pretty text-toned">Description</div>
+    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+      <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="wrapper" class="">
           <!--v-if-->
-          <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-          <p class="text-muted text-xs">benjamincanac</p>
+          <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
         </div>
       </div>
     </div>
diff --git a/test/components/__snapshots__/BlogPosts-vue.spec.ts.snap b/test/components/__snapshots__/BlogPosts-vue.spec.ts.snap
index e63675bd84..c619990f39 100644
--- a/test/components/__snapshots__/BlogPosts-vue.spec.ts.snap
+++ b/test/components/__snapshots__/BlogPosts-vue.spec.ts.snap
@@ -2,20 +2,20 @@
 
 exports[`BlogPosts > renders with as correctly 1`] = `
 "<section data-orientation="horizontal" class="flex flex-col gap-8 lg:gap-y-16 sm:grid sm:grid-cols-2 lg:grid-cols-3">
-  <article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
-    <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img alt="Image alt" src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full"></div>
-    <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
+  <article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
+    <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img alt="Image alt" src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full"></div>
+    <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
       <!--v-if-->
-      <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-        <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" class="text-sm text-toned">Dec 13, 2024</time>
+      <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+        <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm text-toned">Dec 13, 2024</time>
       </div>
-      <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-      <div class="mt-1 text-base text-pretty text-muted">Description</div>
-      <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-        <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://i.pravatar.cc/120?img=1" alt="Author" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-          <div class="">
+      <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+      <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+      <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+        <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://i.pravatar.cc/120?img=1" alt="Author" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+          <div data-slot="wrapper" class="">
             <!--v-if-->
-            <p class="font-medium text-highlighted text-sm">Author</p>
+            <p data-slot="name" class="font-medium text-highlighted text-sm">Author</p>
             <!--v-if-->
           </div>
         </div>
@@ -28,20 +28,20 @@ exports[`BlogPosts > renders with as correctly 1`] = `
 
 exports[`BlogPosts > renders with class correctly 1`] = `
 "<div data-orientation="horizontal" class="flex flex-col gap-8 lg:gap-y-16 sm:grid sm:grid-cols-2 lg:grid-cols-3 gap-y-12">
-  <article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
-    <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img alt="Image alt" src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full"></div>
-    <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
+  <article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
+    <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img alt="Image alt" src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full"></div>
+    <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
       <!--v-if-->
-      <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-        <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" class="text-sm text-toned">Dec 13, 2024</time>
+      <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+        <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm text-toned">Dec 13, 2024</time>
       </div>
-      <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-      <div class="mt-1 text-base text-pretty text-muted">Description</div>
-      <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-        <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://i.pravatar.cc/120?img=1" alt="Author" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-          <div class="">
+      <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+      <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+      <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+        <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://i.pravatar.cc/120?img=1" alt="Author" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+          <div data-slot="wrapper" class="">
             <!--v-if-->
-            <p class="font-medium text-highlighted text-sm">Author</p>
+            <p data-slot="name" class="font-medium text-highlighted text-sm">Author</p>
             <!--v-if-->
           </div>
         </div>
@@ -56,20 +56,20 @@ exports[`BlogPosts > renders with default slot correctly 1`] = `"<div data-orien
 
 exports[`BlogPosts > renders with orientation vertical correctly 1`] = `
 "<div data-orientation="vertical" class="flex flex-col gap-8 lg:gap-y-16">
-  <article data-orientation="horizontal" class="relative group/blog-post flex flex-col rounded-lg overflow-hidden lg:grid lg:grid-cols-2 lg:items-center gap-x-8 bg-default ring ring-default">
-    <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img alt="Image alt" src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full"></div>
-    <div class="min-w-0 flex-1 flex flex-col justify-center p-4 sm:p-6 lg:px-0">
+  <article data-orientation="horizontal" data-slot="root" class="relative group/blog-post flex flex-col rounded-lg overflow-hidden lg:grid lg:grid-cols-2 lg:items-center gap-x-8 bg-default ring ring-default">
+    <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img alt="Image alt" src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full"></div>
+    <div data-slot="body" class="min-w-0 flex-1 flex flex-col justify-center p-4 sm:p-6 lg:px-0">
       <!--v-if-->
-      <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-        <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" class="text-sm text-toned">Dec 13, 2024</time>
+      <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+        <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm text-toned">Dec 13, 2024</time>
       </div>
-      <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-      <div class="mt-1 text-base text-pretty text-muted">Description</div>
-      <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-        <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://i.pravatar.cc/120?img=1" alt="Author" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-          <div class="">
+      <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+      <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+      <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+        <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://i.pravatar.cc/120?img=1" alt="Author" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+          <div data-slot="wrapper" class="">
             <!--v-if-->
-            <p class="font-medium text-highlighted text-sm">Author</p>
+            <p data-slot="name" class="font-medium text-highlighted text-sm">Author</p>
             <!--v-if-->
           </div>
         </div>
@@ -82,20 +82,20 @@ exports[`BlogPosts > renders with orientation vertical correctly 1`] = `
 
 exports[`BlogPosts > renders with posts correctly 1`] = `
 "<div data-orientation="horizontal" class="flex flex-col gap-8 lg:gap-y-16 sm:grid sm:grid-cols-2 lg:grid-cols-3">
-  <article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
-    <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img alt="Image alt" src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full"></div>
-    <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
+  <article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
+    <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img alt="Image alt" src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full"></div>
+    <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
       <!--v-if-->
-      <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-        <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" class="text-sm text-toned">Dec 13, 2024</time>
+      <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+        <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm text-toned">Dec 13, 2024</time>
       </div>
-      <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-      <div class="mt-1 text-base text-pretty text-muted">Description</div>
-      <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-        <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://i.pravatar.cc/120?img=1" alt="Author" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-          <div class="">
+      <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+      <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+      <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+        <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://i.pravatar.cc/120?img=1" alt="Author" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+          <div data-slot="wrapper" class="">
             <!--v-if-->
-            <p class="font-medium text-highlighted text-sm">Author</p>
+            <p data-slot="name" class="font-medium text-highlighted text-sm">Author</p>
             <!--v-if-->
           </div>
         </div>
diff --git a/test/components/__snapshots__/BlogPosts.spec.ts.snap b/test/components/__snapshots__/BlogPosts.spec.ts.snap
index e63675bd84..c619990f39 100644
--- a/test/components/__snapshots__/BlogPosts.spec.ts.snap
+++ b/test/components/__snapshots__/BlogPosts.spec.ts.snap
@@ -2,20 +2,20 @@
 
 exports[`BlogPosts > renders with as correctly 1`] = `
 "<section data-orientation="horizontal" class="flex flex-col gap-8 lg:gap-y-16 sm:grid sm:grid-cols-2 lg:grid-cols-3">
-  <article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
-    <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img alt="Image alt" src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full"></div>
-    <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
+  <article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
+    <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img alt="Image alt" src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full"></div>
+    <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
       <!--v-if-->
-      <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-        <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" class="text-sm text-toned">Dec 13, 2024</time>
+      <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+        <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm text-toned">Dec 13, 2024</time>
       </div>
-      <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-      <div class="mt-1 text-base text-pretty text-muted">Description</div>
-      <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-        <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://i.pravatar.cc/120?img=1" alt="Author" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-          <div class="">
+      <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+      <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+      <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+        <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://i.pravatar.cc/120?img=1" alt="Author" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+          <div data-slot="wrapper" class="">
             <!--v-if-->
-            <p class="font-medium text-highlighted text-sm">Author</p>
+            <p data-slot="name" class="font-medium text-highlighted text-sm">Author</p>
             <!--v-if-->
           </div>
         </div>
@@ -28,20 +28,20 @@ exports[`BlogPosts > renders with as correctly 1`] = `
 
 exports[`BlogPosts > renders with class correctly 1`] = `
 "<div data-orientation="horizontal" class="flex flex-col gap-8 lg:gap-y-16 sm:grid sm:grid-cols-2 lg:grid-cols-3 gap-y-12">
-  <article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
-    <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img alt="Image alt" src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full"></div>
-    <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
+  <article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
+    <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img alt="Image alt" src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full"></div>
+    <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
       <!--v-if-->
-      <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-        <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" class="text-sm text-toned">Dec 13, 2024</time>
+      <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+        <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm text-toned">Dec 13, 2024</time>
       </div>
-      <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-      <div class="mt-1 text-base text-pretty text-muted">Description</div>
-      <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-        <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://i.pravatar.cc/120?img=1" alt="Author" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-          <div class="">
+      <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+      <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+      <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+        <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://i.pravatar.cc/120?img=1" alt="Author" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+          <div data-slot="wrapper" class="">
             <!--v-if-->
-            <p class="font-medium text-highlighted text-sm">Author</p>
+            <p data-slot="name" class="font-medium text-highlighted text-sm">Author</p>
             <!--v-if-->
           </div>
         </div>
@@ -56,20 +56,20 @@ exports[`BlogPosts > renders with default slot correctly 1`] = `"<div data-orien
 
 exports[`BlogPosts > renders with orientation vertical correctly 1`] = `
 "<div data-orientation="vertical" class="flex flex-col gap-8 lg:gap-y-16">
-  <article data-orientation="horizontal" class="relative group/blog-post flex flex-col rounded-lg overflow-hidden lg:grid lg:grid-cols-2 lg:items-center gap-x-8 bg-default ring ring-default">
-    <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img alt="Image alt" src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full"></div>
-    <div class="min-w-0 flex-1 flex flex-col justify-center p-4 sm:p-6 lg:px-0">
+  <article data-orientation="horizontal" data-slot="root" class="relative group/blog-post flex flex-col rounded-lg overflow-hidden lg:grid lg:grid-cols-2 lg:items-center gap-x-8 bg-default ring ring-default">
+    <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img alt="Image alt" src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full"></div>
+    <div data-slot="body" class="min-w-0 flex-1 flex flex-col justify-center p-4 sm:p-6 lg:px-0">
       <!--v-if-->
-      <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-        <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" class="text-sm text-toned">Dec 13, 2024</time>
+      <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+        <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm text-toned">Dec 13, 2024</time>
       </div>
-      <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-      <div class="mt-1 text-base text-pretty text-muted">Description</div>
-      <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-        <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://i.pravatar.cc/120?img=1" alt="Author" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-          <div class="">
+      <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+      <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+      <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+        <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://i.pravatar.cc/120?img=1" alt="Author" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+          <div data-slot="wrapper" class="">
             <!--v-if-->
-            <p class="font-medium text-highlighted text-sm">Author</p>
+            <p data-slot="name" class="font-medium text-highlighted text-sm">Author</p>
             <!--v-if-->
           </div>
         </div>
@@ -82,20 +82,20 @@ exports[`BlogPosts > renders with orientation vertical correctly 1`] = `
 
 exports[`BlogPosts > renders with posts correctly 1`] = `
 "<div data-orientation="horizontal" class="flex flex-col gap-8 lg:gap-y-16 sm:grid sm:grid-cols-2 lg:grid-cols-3">
-  <article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
-    <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img alt="Image alt" src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full"></div>
-    <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
+  <article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
+    <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img alt="Image alt" src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full"></div>
+    <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
       <!--v-if-->
-      <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
-        <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" class="text-sm text-toned">Dec 13, 2024</time>
+      <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+        <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm text-toned">Dec 13, 2024</time>
       </div>
-      <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
-      <div class="mt-1 text-base text-pretty text-muted">Description</div>
-      <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
-        <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://i.pravatar.cc/120?img=1" alt="Author" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-          <div class="">
+      <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
+      <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
+      <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
+        <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://i.pravatar.cc/120?img=1" alt="Author" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+          <div data-slot="wrapper" class="">
             <!--v-if-->
-            <p class="font-medium text-highlighted text-sm">Author</p>
+            <p data-slot="name" class="font-medium text-highlighted text-sm">Author</p>
             <!--v-if-->
           </div>
         </div>
diff --git a/test/components/__snapshots__/Breadcrumb-vue.spec.ts.snap b/test/components/__snapshots__/Breadcrumb-vue.spec.ts.snap
index a4b65beb5e..1755ddf7eb 100644
--- a/test/components/__snapshots__/Breadcrumb-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Breadcrumb-vue.spec.ts.snap
@@ -1,158 +1,158 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Breadcrumb > renders with as correctly 1`] = `
-"<div aria-label="breadcrumb" class="relative min-w-0">
-  <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-muted"></svg></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-muted"></svg></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Breadcrumb</span></a></li>
+"<div aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
+  <ol data-slot="list" class="flex items-center gap-1.5">
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </div>"
 `;
 
 exports[`Breadcrumb > renders with class correctly 1`] = `
-"<nav aria-label="breadcrumb" class="relative min-w-0 w-48">
-  <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-muted"></svg></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-muted"></svg></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Breadcrumb</span></a></li>
+"<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0 w-48">
+  <ol data-slot="list" class="flex items-center gap-1.5">
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
 `;
 
 exports[`Breadcrumb > renders with custom slot correctly 1`] = `
-"<nav aria-label="breadcrumb" class="relative min-w-0">
-  <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-muted"></svg></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-muted"></svg></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold">Custom slot</a></li>
+"<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
+  <ol data-slot="list" class="flex items-center gap-1.5">
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold">Custom slot</a></li>
     <!--v-if-->
   </ol>
 </nav>"
 `;
 
 exports[`Breadcrumb > renders with item slot correctly 1`] = `
-"<nav aria-label="breadcrumb" class="relative min-w-0">
-  <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors">Item slot</a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-muted"></svg></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75">Item slot</span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-muted"></svg></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Breadcrumb</span></a></li>
+"<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
+  <ol data-slot="list" class="flex items-center gap-1.5">
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors">Item slot</a></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75">Item slot</span></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
 `;
 
 exports[`Breadcrumb > renders with item-label slot correctly 1`] = `
-"<nav aria-label="breadcrumb" class="relative min-w-0">
-  <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Item label slot</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-muted"></svg></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Item label slot</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-muted"></svg></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Breadcrumb</span></a></li>
+"<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
+  <ol data-slot="list" class="flex items-center gap-1.5">
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Item label slot</span></a></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Item label slot</span></span></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
 `;
 
 exports[`Breadcrumb > renders with item-leading slot correctly 1`] = `
-"<nav aria-label="breadcrumb" class="relative min-w-0">
-  <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors">Item leading slot<span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-muted"></svg></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75">Item leading slot<span class="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-muted"></svg></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Breadcrumb</span></a></li>
+"<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
+  <ol data-slot="list" class="flex items-center gap-1.5">
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors">Item leading slot<span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75">Item leading slot<span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
 `;
 
 exports[`Breadcrumb > renders with item-trailing slot correctly 1`] = `
-"<nav aria-label="breadcrumb" class="relative min-w-0">
-  <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span>Item trailing slot</a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-muted"></svg></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Components</span>Item trailing slot</span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-muted"></svg></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Breadcrumb</span></a></li>
+"<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
+  <ol data-slot="list" class="flex items-center gap-1.5">
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span>Item trailing slot</a></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Components</span>Item trailing slot</span></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
 `;
 
 exports[`Breadcrumb > renders with items correctly 1`] = `
-"<nav aria-label="breadcrumb" class="relative min-w-0">
-  <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-muted"></svg></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-muted"></svg></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Breadcrumb</span></a></li>
+"<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
+  <ol data-slot="list" class="flex items-center gap-1.5">
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
 `;
 
 exports[`Breadcrumb > renders with labelKey correctly 1`] = `
-"<nav aria-label="breadcrumb" class="relative min-w-0">
-  <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
+  <ol data-slot="list" class="flex items-center gap-1.5">
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <!--v-if-->
       </a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-muted"></svg></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">i-lucide-box</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-muted"></svg></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">i-lucide-link</span></a></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">i-lucide-box</span></span></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">i-lucide-link</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
 `;
 
 exports[`Breadcrumb > renders with separator slot correctly 1`] = `
-"<nav aria-label="breadcrumb" class="relative min-w-0">
-  <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex">/</li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex">/</li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Breadcrumb</span></a></li>
+"<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
+  <ol data-slot="list" class="flex items-center gap-1.5">
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex">/</li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex">/</li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
 `;
 
 exports[`Breadcrumb > renders with separatorIcon correctly 1`] = `
-"<nav aria-label="breadcrumb" class="relative min-w-0">
-  <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-muted"></svg></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-muted"></svg></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Breadcrumb</span></a></li>
+"<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
+  <ol data-slot="list" class="flex items-center gap-1.5">
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
 `;
 
 exports[`Breadcrumb > renders with ui correctly 1`] = `
-"<nav aria-label="breadcrumb" class="relative min-w-0">
-  <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted hover:text-default transition-colors font-bold"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-muted"></svg></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted cursor-not-allowed opacity-75 font-bold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-muted"></svg></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-bold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Breadcrumb</span></a></li>
+"<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
+  <ol data-slot="list" class="flex items-center gap-1.5">
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted hover:text-default transition-colors font-bold"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted cursor-not-allowed opacity-75 font-bold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-5 text-muted"></svg></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-bold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5"></svg><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
diff --git a/test/components/__snapshots__/Breadcrumb.spec.ts.snap b/test/components/__snapshots__/Breadcrumb.spec.ts.snap
index 3ba8c47c1d..ff62e7398f 100644
--- a/test/components/__snapshots__/Breadcrumb.spec.ts.snap
+++ b/test/components/__snapshots__/Breadcrumb.spec.ts.snap
@@ -1,158 +1,158 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Breadcrumb > renders with as correctly 1`] = `
-"<div aria-label="breadcrumb" class="relative min-w-0">
-  <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
+"<div aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
+  <ol data-slot="list" class="flex items-center gap-1.5">
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </div>"
 `;
 
 exports[`Breadcrumb > renders with class correctly 1`] = `
-"<nav aria-label="breadcrumb" class="relative min-w-0 w-48">
-  <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
+"<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0 w-48">
+  <ol data-slot="list" class="flex items-center gap-1.5">
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
 `;
 
 exports[`Breadcrumb > renders with custom slot correctly 1`] = `
-"<nav aria-label="breadcrumb" class="relative min-w-0">
-  <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold">Custom slot</a></li>
+"<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
+  <ol data-slot="list" class="flex items-center gap-1.5">
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold">Custom slot</a></li>
     <!--v-if-->
   </ol>
 </nav>"
 `;
 
 exports[`Breadcrumb > renders with item slot correctly 1`] = `
-"<nav aria-label="breadcrumb" class="relative min-w-0">
-  <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors">Item slot</a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75">Item slot</span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
+"<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
+  <ol data-slot="list" class="flex items-center gap-1.5">
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors">Item slot</a></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75">Item slot</span></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
 `;
 
 exports[`Breadcrumb > renders with item-label slot correctly 1`] = `
-"<nav aria-label="breadcrumb" class="relative min-w-0">
-  <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Item label slot</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Item label slot</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
+"<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
+  <ol data-slot="list" class="flex items-center gap-1.5">
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Item label slot</span></a></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Item label slot</span></span></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
 `;
 
 exports[`Breadcrumb > renders with item-leading slot correctly 1`] = `
-"<nav aria-label="breadcrumb" class="relative min-w-0">
-  <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors">Item leading slot<span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75">Item leading slot<span class="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
+"<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
+  <ol data-slot="list" class="flex items-center gap-1.5">
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors">Item leading slot<span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75">Item leading slot<span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
 `;
 
 exports[`Breadcrumb > renders with item-trailing slot correctly 1`] = `
-"<nav aria-label="breadcrumb" class="relative min-w-0">
-  <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span>Item trailing slot</a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span>Item trailing slot</span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
+"<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
+  <ol data-slot="list" class="flex items-center gap-1.5">
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span>Item trailing slot</a></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components</span>Item trailing slot</span></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
 `;
 
 exports[`Breadcrumb > renders with items correctly 1`] = `
-"<nav aria-label="breadcrumb" class="relative min-w-0">
-  <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
+"<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
+  <ol data-slot="list" class="flex items-center gap-1.5">
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
 `;
 
 exports[`Breadcrumb > renders with labelKey correctly 1`] = `
-"<nav aria-label="breadcrumb" class="relative min-w-0">
-  <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
+  <ol data-slot="list" class="flex items-center gap-1.5">
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
         <!--v-if-->
       </a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">i-lucide-box</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">i-lucide-link</span></a></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">i-lucide-box</span></span></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">i-lucide-link</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
 `;
 
 exports[`Breadcrumb > renders with separator slot correctly 1`] = `
-"<nav aria-label="breadcrumb" class="relative min-w-0">
-  <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex">/</li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex">/</li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
+"<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
+  <ol data-slot="list" class="flex items-center gap-1.5">
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex">/</li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex">/</li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
 `;
 
 exports[`Breadcrumb > renders with separatorIcon correctly 1`] = `
-"<nav aria-label="breadcrumb" class="relative min-w-0">
-  <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:minus shrink-0 size-5 text-muted" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:minus shrink-0 size-5 text-muted" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
+"<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
+  <ol data-slot="list" class="flex items-center gap-1.5">
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium hover:text-default transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:minus shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:minus shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
 `;
 
 exports[`Breadcrumb > renders with ui correctly 1`] = `
-"<nav aria-label="breadcrumb" class="relative min-w-0">
-  <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted hover:text-default transition-colors font-bold"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted cursor-not-allowed opacity-75 font-bold"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-bold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
+"<nav aria-label="breadcrumb" data-slot="root" class="relative min-w-0">
+  <ol data-slot="list" class="flex items-center gap-1.5">
+    <li data-slot="item" class="flex min-w-0"><a href="/" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted hover:text-default transition-colors font-bold"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="linkLabel" class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
+    <li data-slot="item" class="flex min-w-0"><span data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-muted cursor-not-allowed opacity-75 font-bold"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" data-slot="separator" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-muted" aria-hidden="true" data-slot="separatorIcon"></span></li>
+    <li data-slot="item" class="flex min-w-0"><a href="/components/breadcrumb" data-slot="link" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary text-primary font-bold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
diff --git a/test/components/__snapshots__/Button-vue.spec.ts.snap b/test/components/__snapshots__/Button-vue.spec.ts.snap
index a434e17bca..b899958e59 100644
--- a/test/components/__snapshots__/Button-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Button-vue.spec.ts.snap
@@ -1,342 +1,342 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Button > renders with active variant ghost correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with active variant link correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with active variant outline correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with active variant soft correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with active variant solid correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with active variant subtle correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with activeClass correctly 1`] = `
-"<button type="button" class="rounded-md inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors font-bold px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors font-bold px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with as correctly 1`] = `
-"<div class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<div data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Button > renders with avatar and leadingIcon correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with avatar and trailingIcon correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5"></svg>
 </button>"
 `;
 
 exports[`Button > renders with avatar correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with block correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with class correctly 1`] = `
-"<button type="button" class="inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary rounded-full font-bold">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary rounded-full font-bold">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with default slot correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
   <!--v-if-->Default slot
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with disabled and with link correctly 1`] = `
-"<a aria-disabled="true" role="link" tabindex="-1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<a aria-disabled="true" role="link" tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </a>"
 `;
 
 exports[`Button > renders with disabled correctly 1`] = `
-"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with icon correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with inactiveClass correctly 1`] = `
-"<button type="button" class="rounded-md inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors font-light px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors font-light px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with label correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with leading and icon correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with leading slot correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5">Leading slot
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5">Leading slot
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with leadingIcon correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with loading and avatar correctly 1`] = `
-"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 animate-spin"></svg>
+"<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5 animate-spin"></svg>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with loading correctly 1`] = `
-"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 animate-spin"></svg>
+"<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5 animate-spin"></svg>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with loading trailing and avatar correctly 1`] = `
-"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 animate-spin"></svg>
+"<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 animate-spin"></svg>
 </button>"
 `;
 
 exports[`Button > renders with loading trailing correctly 1`] = `
-"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5">
+"<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5">
   <!--v-if-->
-  <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 animate-spin"></svg>
+  <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 animate-spin"></svg>
 </button>"
 `;
 
 exports[`Button > renders with loadingIcon correctly 1`] = `
-"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 animate-spin"></svg>
+"<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5 animate-spin"></svg>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with neutral variant ghost correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with neutral variant link correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with neutral variant outline correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with neutral variant soft correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with neutral variant solid correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with neutral variant subtle correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with primary variant ghost correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with primary variant link correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with primary variant outline correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with primary variant soft correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with primary variant solid correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with primary variant subtle correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with size lg correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with size md correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with size sm correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with size xl correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with size xs correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with square correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with trailing and icon correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5">
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5">
   <!--v-if-->
-  <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5"></svg>
 </button>"
 `;
 
 exports[`Button > renders with trailing slot correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5">
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5">
   <!--v-if-->
   <!--v-if-->Trailing slot
 </button>"
 `;
 
 exports[`Button > renders with trailingIcon correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5">
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5">
   <!--v-if-->
-  <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5"></svg>
 </button>"
 `;
 
 exports[`Button > renders with ui correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate font-bold">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate font-bold">Button</span>
   <!--v-if-->
 </button>"
 `;
diff --git a/test/components/__snapshots__/Button.spec.ts.snap b/test/components/__snapshots__/Button.spec.ts.snap
index 9dc31cf5c6..29de5cb900 100644
--- a/test/components/__snapshots__/Button.spec.ts.snap
+++ b/test/components/__snapshots__/Button.spec.ts.snap
@@ -1,342 +1,342 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Button > renders with active variant ghost correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with active variant link correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with active variant outline correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with active variant soft correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with active variant solid correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with active variant subtle correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with activeClass correctly 1`] = `
-"<button type="button" class="rounded-md inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors font-bold px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors font-bold px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with as correctly 1`] = `
-"<div class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<div data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Button > renders with avatar and leadingIcon correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with avatar and trailingIcon correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="trailingIcon"></span>
 </button>"
 `;
 
 exports[`Button > renders with avatar correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with block correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with class correctly 1`] = `
-"<button type="button" class="inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary rounded-full font-bold">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary rounded-full font-bold">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with default slot correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
   <!--v-if-->Default slot
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with disabled and with link correctly 1`] = `
-"<a aria-disabled="true" role="link" tabindex="-1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<a aria-disabled="true" role="link" tabindex="-1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </a>"
 `;
 
 exports[`Button > renders with disabled correctly 1`] = `
-"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with icon correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:rocket shrink-0 size-5" aria-hidden="true"></span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:rocket shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with inactiveClass correctly 1`] = `
-"<button type="button" class="rounded-md inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors font-light px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors font-light px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with label correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with leading and icon correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with leading slot correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5">Leading slot
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5">Leading slot
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with leadingIcon correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with loading and avatar correctly 1`] = `
-"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:loader-circle shrink-0 size-5 animate-spin" aria-hidden="true"></span>
+"<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:loader-circle shrink-0 size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with loading correctly 1`] = `
-"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:loader-circle shrink-0 size-5 animate-spin" aria-hidden="true"></span>
+"<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:loader-circle shrink-0 size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with loading trailing and avatar correctly 1`] = `
-"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <!--v-if--><span class="iconify i-lucide:loader-circle shrink-0 size-5 animate-spin" aria-hidden="true"></span>
+"<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <!--v-if--><span class="iconify i-lucide:loader-circle shrink-0 size-5 animate-spin" aria-hidden="true" data-slot="trailingIcon"></span>
 </button>"
 `;
 
 exports[`Button > renders with loading trailing correctly 1`] = `
-"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5">
+"<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5">
   <!--v-if-->
-  <!--v-if--><span class="iconify i-lucide:loader-circle shrink-0 size-5 animate-spin" aria-hidden="true"></span>
+  <!--v-if--><span class="iconify i-lucide:loader-circle shrink-0 size-5 animate-spin" aria-hidden="true" data-slot="trailingIcon"></span>
 </button>"
 `;
 
 exports[`Button > renders with loadingIcon correctly 1`] = `
-"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:loader shrink-0 size-5 animate-spin" aria-hidden="true"></span>
+"<button type="button" disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:loader shrink-0 size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with neutral variant ghost correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with neutral variant link correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with neutral variant outline correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with neutral variant soft correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with neutral variant solid correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with neutral variant subtle correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with primary variant ghost correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with primary variant link correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with primary variant outline correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with primary variant soft correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with primary variant solid correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with primary variant subtle correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with size lg correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with size md correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with size sm correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with size xl correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with size xs correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with square correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5">
-  <!--v-if--><span class="truncate">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with trailing and icon correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5">
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5">
   <!--v-if-->
-  <!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
+  <!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="trailingIcon"></span>
 </button>"
 `;
 
 exports[`Button > renders with trailing slot correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5">
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5">
   <!--v-if-->
   <!--v-if-->Trailing slot
 </button>"
 `;
 
 exports[`Button > renders with trailingIcon correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5">
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5">
   <!--v-if-->
-  <!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
+  <!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="trailingIcon"></span>
 </button>"
 `;
 
 exports[`Button > renders with ui correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-  <!--v-if--><span class="truncate font-bold">Button</span>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  <!--v-if--><span data-slot="label" class="truncate font-bold">Button</span>
   <!--v-if-->
 </button>"
 `;
diff --git a/test/components/__snapshots__/Calendar-vue.spec.ts.snap b/test/components/__snapshots__/Calendar-vue.spec.ts.snap
index b98044a949..bfb38249f7 100644
--- a/test/components/__snapshots__/Calendar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Calendar-vue.spec.ts.snap
@@ -1,172 +1,172 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Calendar > renders with as correctly 1`] = `
-"<section aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<section aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -179,172 +179,172 @@ exports[`Calendar > renders with as correctly 1`] = `
 `;
 
 exports[`Calendar > renders with class correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr" class="max-w-sm">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root" class="max-w-sm">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -357,172 +357,172 @@ exports[`Calendar > renders with class correctly 1`] = `
 `;
 
 exports[`Calendar > renders with color neutral correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-highlighted text-xs">S</th>
-          <th class="rounded-md text-highlighted text-xs">M</th>
-          <th class="rounded-md text-highlighted text-xs">T</th>
-          <th class="rounded-md text-highlighted text-xs">W</th>
-          <th class="rounded-md text-highlighted text-xs">T</th>
-          <th class="rounded-md text-highlighted text-xs">F</th>
-          <th class="rounded-md text-highlighted text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-highlighted text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-highlighted text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-highlighted text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-highlighted text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-highlighted text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-highlighted text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-highlighted text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">8</div>
           </td>
         </tr>
       </tbody>
@@ -535,172 +535,172 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
 `;
 
 exports[`Calendar > renders with day slot correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -713,172 +713,172 @@ exports[`Calendar > renders with day slot correctly 1`] = `
 `;
 
 exports[`Calendar > renders with default value correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-selected="true" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -891,172 +891,172 @@ exports[`Calendar > renders with default value correctly 1`] = `
 `;
 
 exports[`Calendar > renders with disabled correctly 1`] = `
-"<div aria-label="Event Date, January 2025" data-disabled="" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" disabled="" aria-label="Previous year" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" data-disabled="" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" disabled="" aria-label="Previous year" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous month" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous month" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-disabled="" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" disabled="" aria-label="Next month" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-disabled="" data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" disabled="" aria-label="Next month" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Next year" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Next year" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" aria-disabled="true" data-disabled="" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" aria-disabled="true" data-disabled="" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-disabled="" data-today="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-disabled="" data-today="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -1069,172 +1069,172 @@ exports[`Calendar > renders with disabled correctly 1`] = `
 `;
 
 exports[`Calendar > renders with heading slot correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">Heading</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">Heading</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -1247,172 +1247,172 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
 `;
 
 exports[`Calendar > renders with isDateDisabled correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-disabled="" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-disabled="" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -1425,172 +1425,172 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
 `;
 
 exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-unavailable="" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-unavailable="" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -1603,172 +1603,172 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
 `;
 
 exports[`Calendar > renders with modelValue correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-selected="true" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -1781,172 +1781,172 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
 `;
 
 exports[`Calendar > renders with multiple correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -1959,172 +1959,172 @@ exports[`Calendar > renders with multiple correctly 1`] = `
 `;
 
 exports[`Calendar > renders with nextMonth correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr" nextmonth="[object Object]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" nextmonth="[object Object]" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -2137,172 +2137,172 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
 `;
 
 exports[`Calendar > renders with nextYear correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr" nextyear="[object Object]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" nextyear="[object Object]" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -2315,325 +2315,325 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
 `;
 
 exports[`Calendar > renders with numberOfMonths correctly 1`] = `
-"<div aria-label="Event Date, January - February 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January - February 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January - February 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January - February 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
     </table>
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-02-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-02-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-02-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-02-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-02-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-02-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-02-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-02-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-02-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-02-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-02-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-02-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-02-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-02-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-02-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-02-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-02-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-02-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-02-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-02-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-02-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-02-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-02-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-02-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-02-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-02-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-02-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-02-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-09" month="2025-02-01" role="button" aria-label="Sunday, February 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-09" month="2025-02-01" role="button" aria-label="Sunday, February 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-10" month="2025-02-01" role="button" aria-label="Monday, February 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-10" month="2025-02-01" role="button" aria-label="Monday, February 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-11" month="2025-02-01" role="button" aria-label="Tuesday, February 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-11" month="2025-02-01" role="button" aria-label="Tuesday, February 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-12" month="2025-02-01" role="button" aria-label="Wednesday, February 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-12" month="2025-02-01" role="button" aria-label="Wednesday, February 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-13" month="2025-02-01" role="button" aria-label="Thursday, February 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-13" month="2025-02-01" role="button" aria-label="Thursday, February 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-14" month="2025-02-01" role="button" aria-label="Friday, February 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-14" month="2025-02-01" role="button" aria-label="Friday, February 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-15" month="2025-02-01" role="button" aria-label="Saturday, February 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-15" month="2025-02-01" role="button" aria-label="Saturday, February 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-16" month="2025-02-01" role="button" aria-label="Sunday, February 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-16" month="2025-02-01" role="button" aria-label="Sunday, February 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-17" month="2025-02-01" role="button" aria-label="Monday, February 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-17" month="2025-02-01" role="button" aria-label="Monday, February 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-18" month="2025-02-01" role="button" aria-label="Tuesday, February 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-18" month="2025-02-01" role="button" aria-label="Tuesday, February 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-19" month="2025-02-01" role="button" aria-label="Wednesday, February 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-19" month="2025-02-01" role="button" aria-label="Wednesday, February 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-20" month="2025-02-01" role="button" aria-label="Thursday, February 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-20" month="2025-02-01" role="button" aria-label="Thursday, February 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-21" month="2025-02-01" role="button" aria-label="Friday, February 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-21" month="2025-02-01" role="button" aria-label="Friday, February 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-22" month="2025-02-01" role="button" aria-label="Saturday, February 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-22" month="2025-02-01" role="button" aria-label="Saturday, February 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-23" month="2025-02-01" role="button" aria-label="Sunday, February 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-23" month="2025-02-01" role="button" aria-label="Sunday, February 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-24" month="2025-02-01" role="button" aria-label="Monday, February 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-24" month="2025-02-01" role="button" aria-label="Monday, February 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-25" month="2025-02-01" role="button" aria-label="Tuesday, February 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-25" month="2025-02-01" role="button" aria-label="Tuesday, February 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-26" month="2025-02-01" role="button" aria-label="Wednesday, February 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-26" month="2025-02-01" role="button" aria-label="Wednesday, February 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-27" month="2025-02-01" role="button" aria-label="Thursday, February 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-27" month="2025-02-01" role="button" aria-label="Thursday, February 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-28" month="2025-02-01" role="button" aria-label="Friday, February 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-28" month="2025-02-01" role="button" aria-label="Friday, February 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-03-01" month="2025-02-01" role="button" aria-label="Saturday, March 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-03-01" month="2025-02-01" role="button" aria-label="Saturday, March 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-03-02" month="2025-02-01" role="button" aria-label="Sunday, March 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-03-02" month="2025-02-01" role="button" aria-label="Sunday, March 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-03-03" month="2025-02-01" role="button" aria-label="Monday, March 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-03-03" month="2025-02-01" role="button" aria-label="Monday, March 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-03-04" month="2025-02-01" role="button" aria-label="Tuesday, March 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-03-04" month="2025-02-01" role="button" aria-label="Tuesday, March 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-03-05" month="2025-02-01" role="button" aria-label="Wednesday, March 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-03-05" month="2025-02-01" role="button" aria-label="Wednesday, March 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-03-06" month="2025-02-01" role="button" aria-label="Thursday, March 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-03-06" month="2025-02-01" role="button" aria-label="Thursday, March 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-03-07" month="2025-02-01" role="button" aria-label="Friday, March 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-03-07" month="2025-02-01" role="button" aria-label="Friday, March 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-03-08" month="2025-02-01" role="button" aria-label="Saturday, March 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-03-08" month="2025-02-01" role="button" aria-label="Saturday, March 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -2646,172 +2646,172 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
 `;
 
 exports[`Calendar > renders with prevMonth correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr" prevmonth="[object Object]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" prevmonth="[object Object]" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -2824,172 +2824,172 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
 `;
 
 exports[`Calendar > renders with prevYear correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr" prevyear="[object Object]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" prevyear="[object Object]" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -3002,175 +3002,175 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
 `;
 
 exports[`Calendar > renders with range correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
   <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
     <div role="heading" aria-level="2">Event Date, January 2025</div>
   </div>
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-29" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-29" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-30" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-30" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-31" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-31" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-01" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-01" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-02" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-02" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-03" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-03" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-04" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-04" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-05" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-05" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-06" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-06" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-07" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-07" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-08" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-08" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -3180,172 +3180,172 @@ exports[`Calendar > renders with range correctly 1`] = `
 `;
 
 exports[`Calendar > renders with readonly correctly 1`] = `
-"<div aria-label="Event Date, January 2025" data-readonly="" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" data-readonly="" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" aria-readonly="true" data-readonly="" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" aria-readonly="true" data-readonly="" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -3358,172 +3358,172 @@ exports[`Calendar > renders with readonly correctly 1`] = `
 `;
 
 exports[`Calendar > renders with size lg correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-md">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-md">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-md">S</th>
-          <th class="rounded-md text-primary text-md">M</th>
-          <th class="rounded-md text-primary text-md">T</th>
-          <th class="rounded-md text-primary text-md">W</th>
-          <th class="rounded-md text-primary text-md">T</th>
-          <th class="rounded-md text-primary text-md">F</th>
-          <th class="rounded-md text-primary text-md">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-md">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-md">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-md">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-md">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-md">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-md">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-md">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -3536,172 +3536,172 @@ exports[`Calendar > renders with size lg correctly 1`] = `
 `;
 
 exports[`Calendar > renders with size md correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -3714,172 +3714,172 @@ exports[`Calendar > renders with size md correctly 1`] = `
 `;
 
 exports[`Calendar > renders with size sm correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-xs">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-xs">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -3892,172 +3892,172 @@ exports[`Calendar > renders with size sm correctly 1`] = `
 `;
 
 exports[`Calendar > renders with size xl correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-6"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-6"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-lg">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-6"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-lg">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-6"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-lg">S</th>
-          <th class="rounded-md text-primary text-lg">M</th>
-          <th class="rounded-md text-primary text-lg">T</th>
-          <th class="rounded-md text-primary text-lg">W</th>
-          <th class="rounded-md text-primary text-lg">T</th>
-          <th class="rounded-md text-primary text-lg">F</th>
-          <th class="rounded-md text-primary text-lg">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-lg">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-lg">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-lg">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-lg">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-lg">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-lg">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-lg">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -4070,172 +4070,172 @@ exports[`Calendar > renders with size xl correctly 1`] = `
 `;
 
 exports[`Calendar > renders with size xs correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-xs">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-xs">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col sm:flex-row sm:space-x-4 sm:space-y-0 space-y-2 pt-2">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col sm:flex-row sm:space-x-4 sm:space-y-0 space-y-2 pt-2">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-[10px]">S</th>
-          <th class="rounded-md text-primary text-[10px]">M</th>
-          <th class="rounded-md text-primary text-[10px]">T</th>
-          <th class="rounded-md text-primary text-[10px]">W</th>
-          <th class="rounded-md text-primary text-[10px]">T</th>
-          <th class="rounded-md text-primary text-[10px]">F</th>
-          <th class="rounded-md text-primary text-[10px]">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-[10px]">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-[10px]">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-[10px]">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-[10px]">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-[10px]">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-[10px]">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-[10px]">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -4248,172 +4248,172 @@ exports[`Calendar > renders with size xs correctly 1`] = `
 `;
 
 exports[`Calendar > renders with ui correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between gap-4"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between gap-4"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -4426,172 +4426,172 @@ exports[`Calendar > renders with ui correctly 1`] = `
 `;
 
 exports[`Calendar > renders with variant outline correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-15" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-15" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-15" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-15" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-15" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-15" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-15" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-15" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-15" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-15" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-15" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-15" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-15" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-15" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-15" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-15" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-15" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-15" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-15" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-15" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-15" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-15" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-15" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-15" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-15" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-15" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-15" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-15" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-15" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-15" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-15" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-15" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-15" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-15" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">14</div>
           </td>
-          <td role="gridcell" aria-selected="true" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-15" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">15</div>
+          <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-15" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-15" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-15" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-15" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-15" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-15" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-15" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-15" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-15" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-15" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-15" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-15" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-15" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-15" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-15" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-15" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-15" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-15" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-15" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-15" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-15" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-15" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-15" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-15" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-15" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-15" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-15" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-15" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-15" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-15" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-15" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-15" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-15" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-15" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-15" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-15" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-15" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-15" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-15" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-15" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-15" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-15" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-15" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-15" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-15" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-15" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-15" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-15" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-15" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">8</div>
           </td>
         </tr>
       </tbody>
@@ -4604,172 +4604,172 @@ exports[`Calendar > renders with variant outline correctly 1`] = `
 `;
 
 exports[`Calendar > renders with variant soft correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-15" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-15" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-15" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-15" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-15" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-15" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-15" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-15" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-15" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-15" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-15" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-15" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-15" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-15" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-15" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-15" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-15" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-15" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-15" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-15" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-15" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-15" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-15" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-15" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-15" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-15" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-15" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-15" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-15" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-15" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-15" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-15" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-15" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-15" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-selected="true" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-15" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-15" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-15" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-15" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-15" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-15" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-15" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-15" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-15" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-15" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-15" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-15" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-15" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-15" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-15" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-15" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-15" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-15" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-15" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-15" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-15" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-15" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-15" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-15" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-15" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-15" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-15" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-15" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-15" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-15" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-15" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-15" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-15" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-15" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-15" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-15" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-15" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-15" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-15" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-15" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-15" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-15" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-15" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-15" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-15" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-15" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-15" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-15" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-15" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-15" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -4782,172 +4782,172 @@ exports[`Calendar > renders with variant soft correctly 1`] = `
 `;
 
 exports[`Calendar > renders with variant solid correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-15" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-15" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-15" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-15" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-15" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-15" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-15" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-15" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-15" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-15" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-15" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-15" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-15" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-15" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-15" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-15" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-15" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-15" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-15" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-15" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-15" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-15" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-15" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-15" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-15" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-15" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-15" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-15" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-15" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-15" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-15" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-15" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-15" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-15" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-selected="true" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-15" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-15" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-15" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-15" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-15" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-15" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-15" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-15" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-15" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-15" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-15" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-15" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-15" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-15" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-15" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-15" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-15" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-15" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-15" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-15" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-15" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-15" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-15" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-15" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-15" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-15" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-15" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-15" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-15" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-15" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-15" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-15" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-15" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-15" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-15" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-15" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-15" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-15" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-15" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-15" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-15" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-15" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-15" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-15" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-15" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-15" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-15" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-15" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-15" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-15" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -4960,172 +4960,172 @@ exports[`Calendar > renders with variant solid correctly 1`] = `
 `;
 
 exports[`Calendar > renders with variant subtle correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-15" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-15" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-15" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-15" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-15" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-15" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-15" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-15" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-15" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-15" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-15" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-15" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-15" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-15" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-15" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-15" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-15" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-15" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-15" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-15" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-15" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-15" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-15" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-15" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-15" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-15" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-15" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-15" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-15" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-15" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-15" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-15" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-15" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-15" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-selected="true" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-15" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-15" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-15" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-15" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-15" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-15" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-15" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-15" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-15" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-15" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-15" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-15" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-15" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-15" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-15" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-15" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-15" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-15" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-15" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-15" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-15" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-15" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-15" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-15" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-15" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-15" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-15" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-15" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-15" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-15" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-15" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-15" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-15" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-15" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-15" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-15" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-15" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-15" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-15" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-15" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-15" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-15" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-15" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-15" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-15" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-15" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-15" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-15" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-15" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-15" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -5138,172 +5138,172 @@ exports[`Calendar > renders with variant subtle correctly 1`] = `
 `;
 
 exports[`Calendar > renders with week-day slot correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -5316,172 +5316,172 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
 `;
 
 exports[`Calendar > renders with weekStartsOn correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-09" month="2025-01-01" role="button" aria-label="Sunday, February 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-09" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-09" month="2025-01-01" role="button" aria-label="Sunday, February 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-09" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
         </tr>
       </tbody>
@@ -5494,172 +5494,172 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
 `;
 
 exports[`Calendar > renders with weekdayFormat correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">Sun</th>
-          <th class="rounded-md text-primary text-xs">Mon</th>
-          <th class="rounded-md text-primary text-xs">Tue</th>
-          <th class="rounded-md text-primary text-xs">Wed</th>
-          <th class="rounded-md text-primary text-xs">Thu</th>
-          <th class="rounded-md text-primary text-xs">Fri</th>
-          <th class="rounded-md text-primary text-xs">Sat</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">Sun</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">Mon</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">Tue</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">Wed</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">Thu</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">Fri</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">Sat</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -5672,149 +5672,149 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
 `;
 
 exports[`Calendar > renders without fixedWeeks correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
       </tbody>
@@ -5827,168 +5827,168 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
 `;
 
 exports[`Calendar > renders without monthControls correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
     <!--v-if-->
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div>
-    <!--v-if--><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div>
+    <!--v-if--><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -6001,168 +6001,168 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
 `;
 
 exports[`Calendar > renders without yearControls correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between">
-    <!--v-if--><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between">
+    <!--v-if--><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
     <!--v-if-->
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
diff --git a/test/components/__snapshots__/Calendar.spec.ts.snap b/test/components/__snapshots__/Calendar.spec.ts.snap
index e1e6a5b375..fae94fda6c 100644
--- a/test/components/__snapshots__/Calendar.spec.ts.snap
+++ b/test/components/__snapshots__/Calendar.spec.ts.snap
@@ -1,172 +1,172 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Calendar > renders with as correctly 1`] = `
-"<section aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<section aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -179,172 +179,172 @@ exports[`Calendar > renders with as correctly 1`] = `
 `;
 
 exports[`Calendar > renders with class correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr" class="max-w-sm">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root" class="max-w-sm">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -357,172 +357,172 @@ exports[`Calendar > renders with class correctly 1`] = `
 `;
 
 exports[`Calendar > renders with color neutral correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-highlighted text-xs">S</th>
-          <th class="rounded-md text-highlighted text-xs">M</th>
-          <th class="rounded-md text-highlighted text-xs">T</th>
-          <th class="rounded-md text-highlighted text-xs">W</th>
-          <th class="rounded-md text-highlighted text-xs">T</th>
-          <th class="rounded-md text-highlighted text-xs">F</th>
-          <th class="rounded-md text-highlighted text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-highlighted text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-highlighted text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-highlighted text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-highlighted text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-highlighted text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-highlighted text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-highlighted text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">8</div>
           </td>
         </tr>
       </tbody>
@@ -535,172 +535,172 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
 `;
 
 exports[`Calendar > renders with day slot correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -713,172 +713,172 @@ exports[`Calendar > renders with day slot correctly 1`] = `
 `;
 
 exports[`Calendar > renders with default value correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-selected="true" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -891,172 +891,172 @@ exports[`Calendar > renders with default value correctly 1`] = `
 `;
 
 exports[`Calendar > renders with disabled correctly 1`] = `
-"<div aria-label="Event Date, January 2025" data-disabled="" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" disabled="" aria-label="Previous year" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" data-disabled="" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" disabled="" aria-label="Previous year" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous month" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous month" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-disabled="" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" disabled="" aria-label="Next month" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-disabled="" data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" disabled="" aria-label="Next month" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Next year" aria-disabled="true" data-disabled="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Next year" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" aria-disabled="true" data-disabled="" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" aria-disabled="true" data-disabled="" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-disabled="" data-today="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-disabled="" data-today="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -1069,172 +1069,172 @@ exports[`Calendar > renders with disabled correctly 1`] = `
 `;
 
 exports[`Calendar > renders with heading slot correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">Heading</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">Heading</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -1247,172 +1247,172 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
 `;
 
 exports[`Calendar > renders with isDateDisabled correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-disabled="" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-disabled="" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -1425,172 +1425,172 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
 `;
 
 exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-unavailable="" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-unavailable="" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -1603,172 +1603,172 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
 `;
 
 exports[`Calendar > renders with modelValue correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-selected="true" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -1781,172 +1781,172 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
 `;
 
 exports[`Calendar > renders with multiple correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -1959,172 +1959,172 @@ exports[`Calendar > renders with multiple correctly 1`] = `
 `;
 
 exports[`Calendar > renders with nextMonth correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr" nextmonth="[object Object]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" nextmonth="[object Object]" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -2137,172 +2137,172 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
 `;
 
 exports[`Calendar > renders with nextYear correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr" nextyear="[object Object]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" nextyear="[object Object]" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -2315,325 +2315,325 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
 `;
 
 exports[`Calendar > renders with numberOfMonths correctly 1`] = `
-"<div aria-label="Event Date, January - February 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January - February 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January - February 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January - February 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
     </table>
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-02-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-02-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-02-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-02-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-02-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-02-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-02-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-02-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-02-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-02-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-02-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-02-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-02-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-02-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-02-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-02-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-02-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-02-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-02-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-02-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-02-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-02-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-02-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-02-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-02-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-02-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-02-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-02-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-09" month="2025-02-01" role="button" aria-label="Sunday, February 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-09" month="2025-02-01" role="button" aria-label="Sunday, February 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-10" month="2025-02-01" role="button" aria-label="Monday, February 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-10" month="2025-02-01" role="button" aria-label="Monday, February 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-11" month="2025-02-01" role="button" aria-label="Tuesday, February 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-11" month="2025-02-01" role="button" aria-label="Tuesday, February 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-12" month="2025-02-01" role="button" aria-label="Wednesday, February 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-12" month="2025-02-01" role="button" aria-label="Wednesday, February 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-13" month="2025-02-01" role="button" aria-label="Thursday, February 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-13" month="2025-02-01" role="button" aria-label="Thursday, February 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-14" month="2025-02-01" role="button" aria-label="Friday, February 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-14" month="2025-02-01" role="button" aria-label="Friday, February 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-15" month="2025-02-01" role="button" aria-label="Saturday, February 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-15" month="2025-02-01" role="button" aria-label="Saturday, February 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-16" month="2025-02-01" role="button" aria-label="Sunday, February 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-16" month="2025-02-01" role="button" aria-label="Sunday, February 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-17" month="2025-02-01" role="button" aria-label="Monday, February 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-17" month="2025-02-01" role="button" aria-label="Monday, February 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-18" month="2025-02-01" role="button" aria-label="Tuesday, February 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-18" month="2025-02-01" role="button" aria-label="Tuesday, February 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-19" month="2025-02-01" role="button" aria-label="Wednesday, February 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-19" month="2025-02-01" role="button" aria-label="Wednesday, February 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-20" month="2025-02-01" role="button" aria-label="Thursday, February 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-20" month="2025-02-01" role="button" aria-label="Thursday, February 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-21" month="2025-02-01" role="button" aria-label="Friday, February 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-21" month="2025-02-01" role="button" aria-label="Friday, February 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-22" month="2025-02-01" role="button" aria-label="Saturday, February 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-22" month="2025-02-01" role="button" aria-label="Saturday, February 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-23" month="2025-02-01" role="button" aria-label="Sunday, February 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-23" month="2025-02-01" role="button" aria-label="Sunday, February 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-24" month="2025-02-01" role="button" aria-label="Monday, February 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-24" month="2025-02-01" role="button" aria-label="Monday, February 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-25" month="2025-02-01" role="button" aria-label="Tuesday, February 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-25" month="2025-02-01" role="button" aria-label="Tuesday, February 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-26" month="2025-02-01" role="button" aria-label="Wednesday, February 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-26" month="2025-02-01" role="button" aria-label="Wednesday, February 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-27" month="2025-02-01" role="button" aria-label="Thursday, February 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-27" month="2025-02-01" role="button" aria-label="Thursday, February 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-28" month="2025-02-01" role="button" aria-label="Friday, February 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-28" month="2025-02-01" role="button" aria-label="Friday, February 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-03-01" month="2025-02-01" role="button" aria-label="Saturday, March 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-03-01" month="2025-02-01" role="button" aria-label="Saturday, March 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-03-02" month="2025-02-01" role="button" aria-label="Sunday, March 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-03-02" month="2025-02-01" role="button" aria-label="Sunday, March 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-03-03" month="2025-02-01" role="button" aria-label="Monday, March 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-03-03" month="2025-02-01" role="button" aria-label="Monday, March 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-03-04" month="2025-02-01" role="button" aria-label="Tuesday, March 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-03-04" month="2025-02-01" role="button" aria-label="Tuesday, March 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-03-05" month="2025-02-01" role="button" aria-label="Wednesday, March 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-03-05" month="2025-02-01" role="button" aria-label="Wednesday, March 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-03-06" month="2025-02-01" role="button" aria-label="Thursday, March 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-03-06" month="2025-02-01" role="button" aria-label="Thursday, March 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-03-07" month="2025-02-01" role="button" aria-label="Friday, March 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-03-07" month="2025-02-01" role="button" aria-label="Friday, March 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-03-08" month="2025-02-01" role="button" aria-label="Saturday, March 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-03-08" month="2025-02-01" role="button" aria-label="Saturday, March 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -2646,172 +2646,172 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
 `;
 
 exports[`Calendar > renders with prevMonth correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr" prevmonth="[object Object]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" prevmonth="[object Object]" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -2824,172 +2824,172 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
 `;
 
 exports[`Calendar > renders with prevYear correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr" prevyear="[object Object]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" prevyear="[object Object]" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -3002,175 +3002,175 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
 `;
 
 exports[`Calendar > renders with range correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
   <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
     <div role="heading" aria-level="2">Event Date, January 2025</div>
   </div>
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-29" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-29" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-30" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-30" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-31" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-31" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-01" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-01" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-02" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-02" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-03" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-03" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-04" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-04" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-05" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-05" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-06" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-06" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-07" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-07" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-08" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-08" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -3180,172 +3180,172 @@ exports[`Calendar > renders with range correctly 1`] = `
 `;
 
 exports[`Calendar > renders with readonly correctly 1`] = `
-"<div aria-label="Event Date, January 2025" data-readonly="" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" data-readonly="" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" aria-readonly="true" data-readonly="" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" aria-readonly="true" data-readonly="" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -3358,172 +3358,172 @@ exports[`Calendar > renders with readonly correctly 1`] = `
 `;
 
 exports[`Calendar > renders with size lg correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-md">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-md">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-md">S</th>
-          <th class="rounded-md text-primary text-md">M</th>
-          <th class="rounded-md text-primary text-md">T</th>
-          <th class="rounded-md text-primary text-md">W</th>
-          <th class="rounded-md text-primary text-md">T</th>
-          <th class="rounded-md text-primary text-md">F</th>
-          <th class="rounded-md text-primary text-md">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-md">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-md">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-md">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-md">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-md">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-md">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-md">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -3536,172 +3536,172 @@ exports[`Calendar > renders with size lg correctly 1`] = `
 `;
 
 exports[`Calendar > renders with size md correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -3714,172 +3714,172 @@ exports[`Calendar > renders with size md correctly 1`] = `
 `;
 
 exports[`Calendar > renders with size sm correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-xs">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-xs">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -3892,172 +3892,172 @@ exports[`Calendar > renders with size sm correctly 1`] = `
 `;
 
 exports[`Calendar > renders with size xl correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-6" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-6" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-lg">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-lg">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-6" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-lg">S</th>
-          <th class="rounded-md text-primary text-lg">M</th>
-          <th class="rounded-md text-primary text-lg">T</th>
-          <th class="rounded-md text-primary text-lg">W</th>
-          <th class="rounded-md text-primary text-lg">T</th>
-          <th class="rounded-md text-primary text-lg">F</th>
-          <th class="rounded-md text-primary text-lg">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-lg">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-lg">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-lg">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-lg">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-lg">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-lg">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-lg">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -4070,172 +4070,172 @@ exports[`Calendar > renders with size xl correctly 1`] = `
 `;
 
 exports[`Calendar > renders with size xs correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-xs">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-xs">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col sm:flex-row sm:space-x-4 sm:space-y-0 space-y-2 pt-2">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col sm:flex-row sm:space-x-4 sm:space-y-0 space-y-2 pt-2">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-[10px]">S</th>
-          <th class="rounded-md text-primary text-[10px]">M</th>
-          <th class="rounded-md text-primary text-[10px]">T</th>
-          <th class="rounded-md text-primary text-[10px]">W</th>
-          <th class="rounded-md text-primary text-[10px]">T</th>
-          <th class="rounded-md text-primary text-[10px]">F</th>
-          <th class="rounded-md text-primary text-[10px]">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-[10px]">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-[10px]">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-[10px]">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-[10px]">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-[10px]">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-[10px]">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-[10px]">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -4248,172 +4248,172 @@ exports[`Calendar > renders with size xs correctly 1`] = `
 `;
 
 exports[`Calendar > renders with ui correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between gap-4"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between gap-4"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -4426,172 +4426,172 @@ exports[`Calendar > renders with ui correctly 1`] = `
 `;
 
 exports[`Calendar > renders with variant outline correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-15" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-15" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-15" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-15" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-15" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-15" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-15" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-15" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-15" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-15" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-15" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-15" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-15" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-15" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-15" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-15" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-15" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-15" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-15" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-15" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-15" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-15" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-15" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-15" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-15" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-15" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-15" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-15" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-15" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-15" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-15" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-15" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-15" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-15" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">14</div>
           </td>
-          <td role="gridcell" aria-selected="true" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-15" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">15</div>
+          <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-15" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-15" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-15" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-15" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-15" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-15" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-15" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-15" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-15" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-15" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-15" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-15" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-15" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-15" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-15" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-15" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-15" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-15" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-15" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-15" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-15" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-15" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-15" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-15" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-15" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-15" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-15" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-15" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-15" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-15" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-15" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-15" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-15" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-15" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-15" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-15" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-15" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-15" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-15" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-15" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-15" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-15" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-15" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-15" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-15" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-15" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-15" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-15" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-15" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">8</div>
           </td>
         </tr>
       </tbody>
@@ -4604,172 +4604,172 @@ exports[`Calendar > renders with variant outline correctly 1`] = `
 `;
 
 exports[`Calendar > renders with variant soft correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-15" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-15" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-15" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-15" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-15" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-15" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-15" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-15" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-15" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-15" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-15" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-15" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-15" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-15" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-15" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-15" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-15" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-15" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-15" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-15" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-15" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-15" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-15" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-15" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-15" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-15" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-15" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-15" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-15" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-15" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-15" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-15" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-15" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-15" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-selected="true" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-15" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-15" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-15" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-15" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-15" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-15" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-15" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-15" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-15" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-15" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-15" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-15" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-15" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-15" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-15" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-15" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-15" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-15" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-15" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-15" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-15" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-15" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-15" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-15" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-15" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-15" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-15" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-15" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-15" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-15" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-15" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-15" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-15" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-15" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-15" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-15" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-15" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-15" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-15" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-15" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-15" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-15" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-15" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-15" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-15" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-15" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-15" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-15" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-15" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-15" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -4782,172 +4782,172 @@ exports[`Calendar > renders with variant soft correctly 1`] = `
 `;
 
 exports[`Calendar > renders with variant solid correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-15" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-15" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-15" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-15" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-15" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-15" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-15" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-15" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-15" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-15" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-15" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-15" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-15" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-15" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-15" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-15" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-15" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-15" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-15" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-15" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-15" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-15" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-15" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-15" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-15" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-15" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-15" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-15" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-15" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-15" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-15" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-15" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-15" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-15" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-selected="true" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-15" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-15" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-15" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-15" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-15" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-15" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-15" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-15" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-15" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-15" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-15" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-15" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-15" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-15" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-15" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-15" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-15" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-15" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-15" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-15" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-15" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-15" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-15" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-15" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-15" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-15" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-15" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-15" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-15" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-15" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-15" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-15" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-15" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-15" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-15" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-15" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-15" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-15" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-15" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-15" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-15" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-15" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-15" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-15" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-15" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-15" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-15" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-15" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-15" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-15" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -4960,172 +4960,172 @@ exports[`Calendar > renders with variant solid correctly 1`] = `
 `;
 
 exports[`Calendar > renders with variant subtle correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-15" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-15" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-15" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-15" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-15" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-15" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-15" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-15" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-15" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-15" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-15" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-15" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-15" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-15" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-15" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-15" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-15" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-15" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-15" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-15" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-15" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-15" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-15" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-15" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-15" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-15" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-15" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-15" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-15" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-15" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-15" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-15" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-15" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-15" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-selected="true" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-15" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-15" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-15" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-15" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-15" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-15" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-15" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-15" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-15" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-15" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-15" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-15" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-15" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-15" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-15" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-15" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-15" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-15" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-15" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-15" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-15" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-15" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-15" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-15" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-15" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-15" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-15" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-15" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-15" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-15" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-15" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-15" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-15" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-15" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-15" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-15" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-15" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-15" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-15" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-15" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-15" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-15" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-15" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-15" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-15" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-15" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-15" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-15" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-15" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-15" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -5138,172 +5138,172 @@ exports[`Calendar > renders with variant subtle correctly 1`] = `
 `;
 
 exports[`Calendar > renders with week-day slot correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -5316,172 +5316,172 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
 `;
 
 exports[`Calendar > renders with weekStartsOn correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-09" month="2025-01-01" role="button" aria-label="Sunday, February 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-09" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-09" month="2025-01-01" role="button" aria-label="Sunday, February 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-09" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
         </tr>
       </tbody>
@@ -5494,172 +5494,172 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
 `;
 
 exports[`Calendar > renders with weekdayFormat correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">Sun</th>
-          <th class="rounded-md text-primary text-xs">Mon</th>
-          <th class="rounded-md text-primary text-xs">Tue</th>
-          <th class="rounded-md text-primary text-xs">Wed</th>
-          <th class="rounded-md text-primary text-xs">Thu</th>
-          <th class="rounded-md text-primary text-xs">Fri</th>
-          <th class="rounded-md text-primary text-xs">Sat</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">Sun</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">Mon</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">Tue</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">Wed</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">Thu</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">Fri</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">Sat</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -5672,149 +5672,149 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
 `;
 
 exports[`Calendar > renders without fixedWeeks correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
       </tbody>
@@ -5827,168 +5827,168 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
 `;
 
 exports[`Calendar > renders without monthControls correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between"><button type="button" aria-label="Previous year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
     <!--v-if-->
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div>
-    <!--v-if--><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div>
+    <!--v-if--><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -6001,168 +6001,168 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
 `;
 
 exports[`Calendar > renders without yearControls correctly 1`] = `
-"<div aria-label="Event Date, January 2025" dir="ltr">
-  <div class="flex items-center justify-between">
-    <!--v-if--><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+"<div aria-label="Event Date, January 2025" dir="ltr" data-slot="root">
+  <div data-slot="header" class="flex items-center justify-between">
+    <!--v-if--><button type="button" aria-label="Previous month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
     <!--v-if-->
   </div>
-  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+  <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
       <thead aria-hidden="true">
-        <tr class="mb-1 grid w-full grid-cols-7">
-          <th class="rounded-md text-primary text-xs">S</th>
-          <th class="rounded-md text-primary text-xs">M</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">W</th>
-          <th class="rounded-md text-primary text-xs">T</th>
-          <th class="rounded-md text-primary text-xs">F</th>
-          <th class="rounded-md text-primary text-xs">S</th>
+        <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">W</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">T</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">F</th>
+          <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
         </tr>
       </thead>
-      <tbody class="grid">
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+      <tbody data-slot="gridBody" class="grid">
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
-        <tr class="grid grid-cols-7 place-items-center">
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+        <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
-          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
-            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
diff --git a/test/components/__snapshots__/Card-vue.spec.ts.snap b/test/components/__snapshots__/Card-vue.spec.ts.snap
index 0d098cbd43..35c98b69bb 100644
--- a/test/components/__snapshots__/Card-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Card-vue.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Card > renders with as correctly 1`] = `
-"<section class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
+"<section data-slot="root" class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -9,7 +9,7 @@ exports[`Card > renders with as correctly 1`] = `
 `;
 
 exports[`Card > renders with class correctly 1`] = `
-"<div class="overflow-hidden bg-default ring ring-default divide-y divide-default rounded-xl">
+"<div data-slot="root" class="overflow-hidden bg-default ring ring-default divide-y divide-default rounded-xl">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -17,31 +17,31 @@ exports[`Card > renders with class correctly 1`] = `
 `;
 
 exports[`Card > renders with default slot correctly 1`] = `
-"<div class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
+"<div data-slot="root" class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
   <!--v-if-->
-  <div class="p-4 sm:p-6">Default slot</div>
+  <div data-slot="body" class="p-4 sm:p-6">Default slot</div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Card > renders with footer slot correctly 1`] = `
-"<div class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
+"<div data-slot="root" class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
   <!--v-if-->
   <!--v-if-->
-  <div class="p-4 sm:px-6">Footer slot</div>
+  <div data-slot="footer" class="p-4 sm:px-6">Footer slot</div>
 </div>"
 `;
 
 exports[`Card > renders with header slot correctly 1`] = `
-"<div class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
-  <div class="p-4 sm:px-6">Header slot</div>
+"<div data-slot="root" class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
+  <div data-slot="header" class="p-4 sm:px-6">Header slot</div>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Card > renders with ui correctly 1`] = `
-"<div class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
+"<div data-slot="root" class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -49,7 +49,7 @@ exports[`Card > renders with ui correctly 1`] = `
 `;
 
 exports[`Card > renders with variant outline correctly 1`] = `
-"<div class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
+"<div data-slot="root" class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -57,7 +57,7 @@ exports[`Card > renders with variant outline correctly 1`] = `
 `;
 
 exports[`Card > renders with variant soft correctly 1`] = `
-"<div class="rounded-lg overflow-hidden bg-elevated/50 divide-y divide-default">
+"<div data-slot="root" class="rounded-lg overflow-hidden bg-elevated/50 divide-y divide-default">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -65,7 +65,7 @@ exports[`Card > renders with variant soft correctly 1`] = `
 `;
 
 exports[`Card > renders with variant solid correctly 1`] = `
-"<div class="rounded-lg overflow-hidden bg-inverted text-inverted">
+"<div data-slot="root" class="rounded-lg overflow-hidden bg-inverted text-inverted">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -73,7 +73,7 @@ exports[`Card > renders with variant solid correctly 1`] = `
 `;
 
 exports[`Card > renders with variant subtle correctly 1`] = `
-"<div class="rounded-lg overflow-hidden bg-elevated/50 ring ring-default divide-y divide-default">
+"<div data-slot="root" class="rounded-lg overflow-hidden bg-elevated/50 ring ring-default divide-y divide-default">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
diff --git a/test/components/__snapshots__/Card.spec.ts.snap b/test/components/__snapshots__/Card.spec.ts.snap
index 0d098cbd43..35c98b69bb 100644
--- a/test/components/__snapshots__/Card.spec.ts.snap
+++ b/test/components/__snapshots__/Card.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Card > renders with as correctly 1`] = `
-"<section class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
+"<section data-slot="root" class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -9,7 +9,7 @@ exports[`Card > renders with as correctly 1`] = `
 `;
 
 exports[`Card > renders with class correctly 1`] = `
-"<div class="overflow-hidden bg-default ring ring-default divide-y divide-default rounded-xl">
+"<div data-slot="root" class="overflow-hidden bg-default ring ring-default divide-y divide-default rounded-xl">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -17,31 +17,31 @@ exports[`Card > renders with class correctly 1`] = `
 `;
 
 exports[`Card > renders with default slot correctly 1`] = `
-"<div class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
+"<div data-slot="root" class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
   <!--v-if-->
-  <div class="p-4 sm:p-6">Default slot</div>
+  <div data-slot="body" class="p-4 sm:p-6">Default slot</div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Card > renders with footer slot correctly 1`] = `
-"<div class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
+"<div data-slot="root" class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
   <!--v-if-->
   <!--v-if-->
-  <div class="p-4 sm:px-6">Footer slot</div>
+  <div data-slot="footer" class="p-4 sm:px-6">Footer slot</div>
 </div>"
 `;
 
 exports[`Card > renders with header slot correctly 1`] = `
-"<div class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
-  <div class="p-4 sm:px-6">Header slot</div>
+"<div data-slot="root" class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
+  <div data-slot="header" class="p-4 sm:px-6">Header slot</div>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Card > renders with ui correctly 1`] = `
-"<div class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
+"<div data-slot="root" class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -49,7 +49,7 @@ exports[`Card > renders with ui correctly 1`] = `
 `;
 
 exports[`Card > renders with variant outline correctly 1`] = `
-"<div class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
+"<div data-slot="root" class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -57,7 +57,7 @@ exports[`Card > renders with variant outline correctly 1`] = `
 `;
 
 exports[`Card > renders with variant soft correctly 1`] = `
-"<div class="rounded-lg overflow-hidden bg-elevated/50 divide-y divide-default">
+"<div data-slot="root" class="rounded-lg overflow-hidden bg-elevated/50 divide-y divide-default">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -65,7 +65,7 @@ exports[`Card > renders with variant soft correctly 1`] = `
 `;
 
 exports[`Card > renders with variant solid correctly 1`] = `
-"<div class="rounded-lg overflow-hidden bg-inverted text-inverted">
+"<div data-slot="root" class="rounded-lg overflow-hidden bg-inverted text-inverted">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -73,7 +73,7 @@ exports[`Card > renders with variant solid correctly 1`] = `
 `;
 
 exports[`Card > renders with variant subtle correctly 1`] = `
-"<div class="rounded-lg overflow-hidden bg-elevated/50 ring ring-default divide-y divide-default">
+"<div data-slot="root" class="rounded-lg overflow-hidden bg-elevated/50 ring ring-default divide-y divide-default">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
diff --git a/test/components/__snapshots__/Carousel-vue.spec.ts.snap b/test/components/__snapshots__/Carousel-vue.spec.ts.snap
index 73617cde68..4a3d36d8e8 100644
--- a/test/components/__snapshots__/Carousel-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Carousel-vue.spec.ts.snap
@@ -1,22 +1,22 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Carousel > renders with arrows correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
-  <div class="overflow-hidden">
-    <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" data-slot="root" class="relative focus:outline-none">
+  <div data-slot="viewport" class="overflow-hidden">
+    <div data-slot="container" class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
     </div>
   </div>
-  <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="controls" class="">
+    <div data-slot="arrows" class=""><button type="button" disabled="" aria-label="Prev" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -26,15 +26,15 @@ exports[`Carousel > renders with arrows correctly 1`] = `
 `;
 
 exports[`Carousel > renders with as correctly 1`] = `
-"<nav role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
-  <div class="overflow-hidden">
-    <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
+"<nav role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" data-slot="root" class="relative focus:outline-none">
+  <div data-slot="viewport" class="overflow-hidden">
+    <div data-slot="container" class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
     </div>
   </div>
   <!--v-if-->
@@ -42,15 +42,15 @@ exports[`Carousel > renders with as correctly 1`] = `
 `;
 
 exports[`Carousel > renders with class correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none w-full max-w-xs">
-  <div class="overflow-hidden">
-    <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" data-slot="root" class="relative focus:outline-none w-full max-w-xs">
+  <div data-slot="viewport" class="overflow-hidden">
+    <div data-slot="container" class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
     </div>
   </div>
   <!--v-if-->
@@ -58,34 +58,34 @@ exports[`Carousel > renders with class correctly 1`] = `
 `;
 
 exports[`Carousel > renders with dots correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
-  <div class="overflow-hidden">
-    <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
-      <div role="tabpanel" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
-      <div role="tabpanel" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
-      <div role="tabpanel" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
-      <div role="tabpanel" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
-      <div role="tabpanel" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
-      <div role="tabpanel" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" data-slot="root" class="relative focus:outline-none">
+  <div data-slot="viewport" class="overflow-hidden">
+    <div data-slot="container" class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
+      <div role="tabpanel" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
+      <div role="tabpanel" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
+      <div role="tabpanel" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
+      <div role="tabpanel" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
+      <div role="tabpanel" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
+      <div role="tabpanel" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
     </div>
   </div>
-  <div class="">
+  <div data-slot="controls" class="">
     <!--v-if-->
-    <div role="tablist" aria-label="Choose slide to display" class="absolute inset-x-0 -bottom-7 flex flex-wrap items-center justify-center gap-3"></div>
+    <div role="tablist" aria-label="Choose slide to display" data-slot="dots" class="absolute inset-x-0 -bottom-7 flex flex-wrap items-center justify-center gap-3"></div>
   </div>
 </div>"
 `;
 
 exports[`Carousel > renders with items correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
-  <div class="overflow-hidden">
-    <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" data-slot="root" class="relative focus:outline-none">
+  <div data-slot="viewport" class="overflow-hidden">
+    <div data-slot="container" class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
     </div>
   </div>
   <!--v-if-->
@@ -93,22 +93,22 @@ exports[`Carousel > renders with items correctly 1`] = `
 `;
 
 exports[`Carousel > renders with next correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
-  <div class="overflow-hidden">
-    <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" data-slot="root" class="relative focus:outline-none">
+  <div data-slot="viewport" class="overflow-hidden">
+    <div data-slot="container" class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
     </div>
   </div>
-  <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="controls" class="">
+    <div data-slot="arrows" class=""><button type="button" disabled="" aria-label="Prev" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -118,22 +118,22 @@ exports[`Carousel > renders with next correctly 1`] = `
 `;
 
 exports[`Carousel > renders with nextIcon correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
-  <div class="overflow-hidden">
-    <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" data-slot="root" class="relative focus:outline-none">
+  <div data-slot="viewport" class="overflow-hidden">
+    <div data-slot="container" class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
     </div>
   </div>
-  <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="controls" class="">
+    <div data-slot="arrows" class=""><button type="button" disabled="" aria-label="Prev" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -143,15 +143,15 @@ exports[`Carousel > renders with nextIcon correctly 1`] = `
 `;
 
 exports[`Carousel > renders with orientation vertical correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" data-orientation="vertical" tabindex="0" class="relative focus:outline-none">
-  <div class="overflow-hidden">
-    <div class="flex items-start flex-col -mt-4" style="transform: translate3d(0px,NaNpx,0px);">
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pt-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pt-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pt-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pt-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pt-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pt-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
+"<div role="region" aria-roledescription="carousel" data-orientation="vertical" tabindex="0" data-slot="root" class="relative focus:outline-none">
+  <div data-slot="viewport" class="overflow-hidden">
+    <div data-slot="container" class="flex items-start flex-col -mt-4" style="transform: translate3d(0px,NaNpx,0px);">
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full pt-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full pt-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full pt-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full pt-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full pt-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full pt-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
     </div>
   </div>
   <!--v-if-->
@@ -159,22 +159,22 @@ exports[`Carousel > renders with orientation vertical correctly 1`] = `
 `;
 
 exports[`Carousel > renders with prev correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
-  <div class="overflow-hidden">
-    <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" data-slot="root" class="relative focus:outline-none">
+  <div data-slot="viewport" class="overflow-hidden">
+    <div data-slot="container" class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
     </div>
   </div>
-  <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="controls" class="">
+    <div data-slot="arrows" class=""><button type="button" disabled="" aria-label="Prev" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -184,22 +184,22 @@ exports[`Carousel > renders with prev correctly 1`] = `
 `;
 
 exports[`Carousel > renders with prevIcon correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
-  <div class="overflow-hidden">
-    <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" data-slot="root" class="relative focus:outline-none">
+  <div data-slot="viewport" class="overflow-hidden">
+    <div data-slot="container" class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
     </div>
   </div>
-  <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="controls" class="">
+    <div data-slot="arrows" class=""><button type="button" disabled="" aria-label="Prev" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -209,15 +209,15 @@ exports[`Carousel > renders with prevIcon correctly 1`] = `
 `;
 
 exports[`Carousel > renders with ui correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
-  <div class="overflow-hidden h-[320px]">
-    <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" data-slot="root" class="relative focus:outline-none">
+  <div data-slot="viewport" class="overflow-hidden h-[320px]">
+    <div data-slot="container" class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
     </div>
   </div>
   <!--v-if-->
diff --git a/test/components/__snapshots__/Carousel.spec.ts.snap b/test/components/__snapshots__/Carousel.spec.ts.snap
index c3a9686993..bcd95a442a 100644
--- a/test/components/__snapshots__/Carousel.spec.ts.snap
+++ b/test/components/__snapshots__/Carousel.spec.ts.snap
@@ -1,22 +1,22 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Carousel > renders with arrows correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
-  <div class="overflow-hidden">
-    <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" data-slot="root" class="relative focus:outline-none">
+  <div data-slot="viewport" class="overflow-hidden">
+    <div data-slot="container" class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
     </div>
   </div>
-  <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="controls" class="">
+    <div data-slot="arrows" class=""><button type="button" disabled="" aria-label="Prev" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
+      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -26,15 +26,15 @@ exports[`Carousel > renders with arrows correctly 1`] = `
 `;
 
 exports[`Carousel > renders with as correctly 1`] = `
-"<nav role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
-  <div class="overflow-hidden">
-    <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
+"<nav role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" data-slot="root" class="relative focus:outline-none">
+  <div data-slot="viewport" class="overflow-hidden">
+    <div data-slot="container" class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
     </div>
   </div>
   <!--v-if-->
@@ -42,15 +42,15 @@ exports[`Carousel > renders with as correctly 1`] = `
 `;
 
 exports[`Carousel > renders with class correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none w-full max-w-xs">
-  <div class="overflow-hidden">
-    <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" data-slot="root" class="relative focus:outline-none w-full max-w-xs">
+  <div data-slot="viewport" class="overflow-hidden">
+    <div data-slot="container" class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
     </div>
   </div>
   <!--v-if-->
@@ -58,34 +58,34 @@ exports[`Carousel > renders with class correctly 1`] = `
 `;
 
 exports[`Carousel > renders with dots correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
-  <div class="overflow-hidden">
-    <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
-      <div role="tabpanel" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
-      <div role="tabpanel" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
-      <div role="tabpanel" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
-      <div role="tabpanel" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
-      <div role="tabpanel" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
-      <div role="tabpanel" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" data-slot="root" class="relative focus:outline-none">
+  <div data-slot="viewport" class="overflow-hidden">
+    <div data-slot="container" class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
+      <div role="tabpanel" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
+      <div role="tabpanel" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
+      <div role="tabpanel" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
+      <div role="tabpanel" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
+      <div role="tabpanel" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
+      <div role="tabpanel" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
     </div>
   </div>
-  <div class="">
+  <div data-slot="controls" class="">
     <!--v-if-->
-    <div role="tablist" aria-label="Choose slide to display" class="absolute inset-x-0 -bottom-7 flex flex-wrap items-center justify-center gap-3"></div>
+    <div role="tablist" aria-label="Choose slide to display" data-slot="dots" class="absolute inset-x-0 -bottom-7 flex flex-wrap items-center justify-center gap-3"></div>
   </div>
 </div>"
 `;
 
 exports[`Carousel > renders with items correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
-  <div class="overflow-hidden">
-    <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" data-slot="root" class="relative focus:outline-none">
+  <div data-slot="viewport" class="overflow-hidden">
+    <div data-slot="container" class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
     </div>
   </div>
   <!--v-if-->
@@ -93,22 +93,22 @@ exports[`Carousel > renders with items correctly 1`] = `
 `;
 
 exports[`Carousel > renders with next correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
-  <div class="overflow-hidden">
-    <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" data-slot="root" class="relative focus:outline-none">
+  <div data-slot="viewport" class="overflow-hidden">
+    <div data-slot="container" class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
     </div>
   </div>
-  <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="controls" class="">
+    <div data-slot="arrows" class=""><button type="button" disabled="" aria-label="Prev" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
+      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -118,22 +118,22 @@ exports[`Carousel > renders with next correctly 1`] = `
 `;
 
 exports[`Carousel > renders with nextIcon correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
-  <div class="overflow-hidden">
-    <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" data-slot="root" class="relative focus:outline-none">
+  <div data-slot="viewport" class="overflow-hidden">
+    <div data-slot="container" class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
     </div>
   </div>
-  <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="controls" class="">
+    <div data-slot="arrows" class=""><button type="button" disabled="" aria-label="Prev" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
+      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -143,15 +143,15 @@ exports[`Carousel > renders with nextIcon correctly 1`] = `
 `;
 
 exports[`Carousel > renders with orientation vertical correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" data-orientation="vertical" tabindex="0" class="relative focus:outline-none">
-  <div class="overflow-hidden">
-    <div class="flex items-start flex-col -mt-4" style="transform: translate3d(0px,NaNpx,0px);">
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pt-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pt-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pt-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pt-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pt-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pt-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
+"<div role="region" aria-roledescription="carousel" data-orientation="vertical" tabindex="0" data-slot="root" class="relative focus:outline-none">
+  <div data-slot="viewport" class="overflow-hidden">
+    <div data-slot="container" class="flex items-start flex-col -mt-4" style="transform: translate3d(0px,NaNpx,0px);">
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full pt-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full pt-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full pt-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full pt-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full pt-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full pt-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
     </div>
   </div>
   <!--v-if-->
@@ -159,22 +159,22 @@ exports[`Carousel > renders with orientation vertical correctly 1`] = `
 `;
 
 exports[`Carousel > renders with prev correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
-  <div class="overflow-hidden">
-    <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" data-slot="root" class="relative focus:outline-none">
+  <div data-slot="viewport" class="overflow-hidden">
+    <div data-slot="container" class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
     </div>
   </div>
-  <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="controls" class="">
+    <div data-slot="arrows" class=""><button type="button" disabled="" aria-label="Prev" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
+      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -184,22 +184,22 @@ exports[`Carousel > renders with prev correctly 1`] = `
 `;
 
 exports[`Carousel > renders with prevIcon correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
-  <div class="overflow-hidden">
-    <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" data-slot="root" class="relative focus:outline-none">
+  <div data-slot="viewport" class="overflow-hidden">
+    <div data-slot="container" class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
     </div>
   </div>
-  <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="controls" class="">
+    <div data-slot="arrows" class=""><button type="button" disabled="" aria-label="Prev" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
+      </button><button type="button" disabled="" aria-label="Next" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -209,15 +209,15 @@ exports[`Carousel > renders with prevIcon correctly 1`] = `
 `;
 
 exports[`Carousel > renders with ui correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
-  <div class="overflow-hidden h-[320px]">
-    <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" data-slot="root" class="relative focus:outline-none">
+  <div data-slot="viewport" class="overflow-hidden h-[320px]">
+    <div data-slot="container" class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" alt="Image 1" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" alt="Image 2" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" alt="Image 3" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" alt="Image 4" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" alt="Image 5" width="300" height="300" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" data-slot="item" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" alt="Image 6" width="300" height="300" class="rounded-lg"></div>
     </div>
   </div>
   <!--v-if-->
diff --git a/test/components/__snapshots__/ChangelogVersion-vue.spec.ts.snap b/test/components/__snapshots__/ChangelogVersion-vue.spec.ts.snap
index a20c16ad77..13ce134001 100644
--- a/test/components/__snapshots__/ChangelogVersion-vue.spec.ts.snap
+++ b/test/components/__snapshots__/ChangelogVersion-vue.spec.ts.snap
@@ -1,16 +1,16 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ChangelogVersion > renders with actions slot correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
     <!--v-if-->
-    <div class="border-t border-default pt-5 flex items-center justify-between mt-5">
+    <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
       <!--v-if-->Actions slot
     </div>
   </div>
@@ -18,14 +18,14 @@ exports[`ChangelogVersion > renders with actions slot correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with as correctly 1`] = `
-"<section class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<section data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -33,22 +33,22 @@ exports[`ChangelogVersion > renders with as correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with authors correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
     <!--v-if-->
-    <div class="border-t border-default pt-5 flex items-center justify-between mt-5">
-      <div class="flex flex-wrap gap-x-4 gap-y-1.5">
-        <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-          <div class="">
+    <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
+      <div data-slot="authors" class="flex flex-wrap gap-x-4 gap-y-1.5">
+        <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+          <div data-slot="wrapper" class="">
             <!--v-if-->
-            <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-            <p class="text-muted text-xs">benjamincanac</p>
+            <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+            <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
           </div>
         </div>
       </div>
@@ -58,33 +58,33 @@ exports[`ChangelogVersion > renders with authors correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with authors slot correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
     <!--v-if-->
-    <div class="border-t border-default pt-5 flex items-center justify-between mt-5">
-      <div class="flex flex-wrap gap-x-4 gap-y-1.5">Authors slot</div>
+    <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
+      <div data-slot="authors" class="flex flex-wrap gap-x-4 gap-y-1.5">Authors slot</div>
     </div>
   </div>
 </article>"
 `;
 
 exports[`ChangelogVersion > renders with badge correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
-      <div class="flex items-center gap-3 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
+      <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
         <!--v-if--></span>
         <!--v-if-->
       </div>
@@ -98,16 +98,16 @@ exports[`ChangelogVersion > renders with badge correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with badge object correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
-      <div class="flex items-center gap-3 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
+      <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
         <!--v-if--></span>
         <!--v-if-->
       </div>
@@ -121,16 +121,16 @@ exports[`ChangelogVersion > renders with badge object correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with badge slot correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
-      <div class="flex items-center gap-3 mb-2">Badge slot
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
+      <div data-slot="meta" class="flex items-center gap-3 mb-2">Badge slot
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -143,14 +143,14 @@ exports[`ChangelogVersion > renders with badge slot correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with body slot correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
     <!--v-if-->Body slot
     <!--v-if-->
   </div>
@@ -158,14 +158,14 @@ exports[`ChangelogVersion > renders with body slot correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with class correctly 1`] = `
-"<article class="absolute">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="absolute">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -173,16 +173,16 @@ exports[`ChangelogVersion > renders with class correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with date correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2025-01-01T00:00:00.000Z" class="text-sm/6 text-toned truncate">Jan 1, 2025</time>
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2025-01-01T00:00:00.000Z" data-slot="date" class="text-sm/6 text-toned truncate">Jan 1, 2025</time>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
-      <div class="flex items-center gap-3 mb-2 lg:hidden">
-        <!--v-if--><time datetime="2025-01-01T00:00:00.000Z" class="text-sm/6 text-toned truncate lg:hidden">Jan 1, 2025</time>
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
+      <div data-slot="meta" class="flex items-center gap-3 mb-2 lg:hidden">
+        <!--v-if--><time datetime="2025-01-01T00:00:00.000Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Jan 1, 2025</time>
       </div>
       <!--v-if-->
       <!--v-if-->
@@ -194,16 +194,16 @@ exports[`ChangelogVersion > renders with date correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with date slot correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
-      <div class="flex items-center gap-3 mb-2 lg:hidden">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
+      <div data-slot="meta" class="flex items-center gap-3 mb-2 lg:hidden">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -217,18 +217,18 @@ exports[`ChangelogVersion > renders with date slot correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with description correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
       <!--v-if-->
       <!--v-if-->
-      <div class="text-base text-pretty text-muted mt-1">Description</div>
+      <div data-slot="description" class="text-base text-pretty text-muted mt-1">Description</div>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -237,18 +237,18 @@ exports[`ChangelogVersion > renders with description correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with description slot correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
       <!--v-if-->
       <!--v-if-->
-      <div class="text-base text-pretty text-muted mt-1">Description slot</div>
+      <div data-slot="description" class="text-base text-pretty text-muted mt-1">Description slot</div>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -257,18 +257,18 @@ exports[`ChangelogVersion > renders with description slot correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with description slot correctly 2`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
       <!--v-if-->
       <!--v-if-->
-      <div class="text-base text-pretty text-muted mt-1">Description slot</div>
+      <div data-slot="description" class="text-base text-pretty text-muted mt-1">Description slot</div>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -277,49 +277,49 @@ exports[`ChangelogVersion > renders with description slot correctly 2`] = `
 `;
 
 exports[`ChangelogVersion > renders with footer slot correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
     <!--v-if-->
-    <div class="border-t border-default pt-5 flex items-center justify-between mt-5">Footer slot</div>
+    <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">Footer slot</div>
   </div>
 </article>"
 `;
 
 exports[`ChangelogVersion > renders with header slot correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">Header slot</div>
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">Header slot</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChangelogVersion > renders with image correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <div class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full">
+      <div data-slot="imageWrapper" class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full">
         <!--v-if-->
       </div>
     </div>
@@ -329,19 +329,19 @@ exports[`ChangelogVersion > renders with image correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with image slot correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <div class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image">Image slot
+      <div data-slot="imageWrapper" class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image">Image slot
         <!--v-if-->
       </div>
     </div>
@@ -351,9 +351,9 @@ exports[`ChangelogVersion > renders with image slot correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with indicator slot correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">Indicator slot</div>
-  <div class="flex flex-col mx-auto max-w-2xl">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">Indicator slot</div>
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -361,17 +361,17 @@ exports[`ChangelogVersion > renders with indicator slot correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with title correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
       <!--v-if-->
-      <h2 class="relative text-xl text-pretty font-semibold text-highlighted">
+      <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
         <!--v-if-->Title
       </h2>
       <!--v-if-->
@@ -383,17 +383,17 @@ exports[`ChangelogVersion > renders with title correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with title slot correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
       <!--v-if-->
-      <h2 class="relative text-xl text-pretty font-semibold text-highlighted">
+      <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
         <!--v-if-->Title slot
       </h2>
       <!--v-if-->
@@ -405,17 +405,17 @@ exports[`ChangelogVersion > renders with title slot correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with title slot correctly 2`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
       <!--v-if-->
-      <h2 class="relative text-xl text-pretty font-semibold text-highlighted">
+      <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
         <!--v-if-->Title slot
       </h2>
       <!--v-if-->
@@ -427,19 +427,19 @@ exports[`ChangelogVersion > renders with title slot correctly 2`] = `
 `;
 
 exports[`ChangelogVersion > renders with to & image correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <div class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/changelog-version-image:scale-105"><a href="/changelog" tabindex="-1" aria-label="Version link" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a></div>
+      <div data-slot="imageWrapper" class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/changelog-version-image:scale-105"><a href="/changelog" tabindex="-1" aria-label="Version link" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a></div>
     </div>
     <!--v-if-->
   </div>
@@ -447,14 +447,14 @@ exports[`ChangelogVersion > renders with to & image correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with to correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -462,14 +462,14 @@ exports[`ChangelogVersion > renders with to correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with ui correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-xl">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -477,9 +477,9 @@ exports[`ChangelogVersion > renders with ui correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders without indicator correctly 1`] = `
-"<article class="relative">
+"<article data-slot="root" class="relative">
   <!--v-if-->
-  <div class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
     <!--v-if-->
     <!--v-if-->
   </div>
diff --git a/test/components/__snapshots__/ChangelogVersion.spec.ts.snap b/test/components/__snapshots__/ChangelogVersion.spec.ts.snap
index a20c16ad77..13ce134001 100644
--- a/test/components/__snapshots__/ChangelogVersion.spec.ts.snap
+++ b/test/components/__snapshots__/ChangelogVersion.spec.ts.snap
@@ -1,16 +1,16 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ChangelogVersion > renders with actions slot correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
     <!--v-if-->
-    <div class="border-t border-default pt-5 flex items-center justify-between mt-5">
+    <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
       <!--v-if-->Actions slot
     </div>
   </div>
@@ -18,14 +18,14 @@ exports[`ChangelogVersion > renders with actions slot correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with as correctly 1`] = `
-"<section class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<section data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -33,22 +33,22 @@ exports[`ChangelogVersion > renders with as correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with authors correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
     <!--v-if-->
-    <div class="border-t border-default pt-5 flex items-center justify-between mt-5">
-      <div class="flex flex-wrap gap-x-4 gap-y-1.5">
-        <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-          <div class="">
+    <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
+      <div data-slot="authors" class="flex flex-wrap gap-x-4 gap-y-1.5">
+        <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+          <div data-slot="wrapper" class="">
             <!--v-if-->
-            <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-            <p class="text-muted text-xs">benjamincanac</p>
+            <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+            <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
           </div>
         </div>
       </div>
@@ -58,33 +58,33 @@ exports[`ChangelogVersion > renders with authors correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with authors slot correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
     <!--v-if-->
-    <div class="border-t border-default pt-5 flex items-center justify-between mt-5">
-      <div class="flex flex-wrap gap-x-4 gap-y-1.5">Authors slot</div>
+    <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
+      <div data-slot="authors" class="flex flex-wrap gap-x-4 gap-y-1.5">Authors slot</div>
     </div>
   </div>
 </article>"
 `;
 
 exports[`ChangelogVersion > renders with badge correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
-      <div class="flex items-center gap-3 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
+      <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
         <!--v-if--></span>
         <!--v-if-->
       </div>
@@ -98,16 +98,16 @@ exports[`ChangelogVersion > renders with badge correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with badge object correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
-      <div class="flex items-center gap-3 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
+      <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
         <!--v-if--></span>
         <!--v-if-->
       </div>
@@ -121,16 +121,16 @@ exports[`ChangelogVersion > renders with badge object correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with badge slot correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
-      <div class="flex items-center gap-3 mb-2">Badge slot
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
+      <div data-slot="meta" class="flex items-center gap-3 mb-2">Badge slot
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -143,14 +143,14 @@ exports[`ChangelogVersion > renders with badge slot correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with body slot correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
     <!--v-if-->Body slot
     <!--v-if-->
   </div>
@@ -158,14 +158,14 @@ exports[`ChangelogVersion > renders with body slot correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with class correctly 1`] = `
-"<article class="absolute">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="absolute">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -173,16 +173,16 @@ exports[`ChangelogVersion > renders with class correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with date correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2025-01-01T00:00:00.000Z" class="text-sm/6 text-toned truncate">Jan 1, 2025</time>
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2025-01-01T00:00:00.000Z" data-slot="date" class="text-sm/6 text-toned truncate">Jan 1, 2025</time>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
-      <div class="flex items-center gap-3 mb-2 lg:hidden">
-        <!--v-if--><time datetime="2025-01-01T00:00:00.000Z" class="text-sm/6 text-toned truncate lg:hidden">Jan 1, 2025</time>
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
+      <div data-slot="meta" class="flex items-center gap-3 mb-2 lg:hidden">
+        <!--v-if--><time datetime="2025-01-01T00:00:00.000Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Jan 1, 2025</time>
       </div>
       <!--v-if-->
       <!--v-if-->
@@ -194,16 +194,16 @@ exports[`ChangelogVersion > renders with date correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with date slot correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
-      <div class="flex items-center gap-3 mb-2 lg:hidden">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
+      <div data-slot="meta" class="flex items-center gap-3 mb-2 lg:hidden">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -217,18 +217,18 @@ exports[`ChangelogVersion > renders with date slot correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with description correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
       <!--v-if-->
       <!--v-if-->
-      <div class="text-base text-pretty text-muted mt-1">Description</div>
+      <div data-slot="description" class="text-base text-pretty text-muted mt-1">Description</div>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -237,18 +237,18 @@ exports[`ChangelogVersion > renders with description correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with description slot correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
       <!--v-if-->
       <!--v-if-->
-      <div class="text-base text-pretty text-muted mt-1">Description slot</div>
+      <div data-slot="description" class="text-base text-pretty text-muted mt-1">Description slot</div>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -257,18 +257,18 @@ exports[`ChangelogVersion > renders with description slot correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with description slot correctly 2`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
       <!--v-if-->
       <!--v-if-->
-      <div class="text-base text-pretty text-muted mt-1">Description slot</div>
+      <div data-slot="description" class="text-base text-pretty text-muted mt-1">Description slot</div>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -277,49 +277,49 @@ exports[`ChangelogVersion > renders with description slot correctly 2`] = `
 `;
 
 exports[`ChangelogVersion > renders with footer slot correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
     <!--v-if-->
-    <div class="border-t border-default pt-5 flex items-center justify-between mt-5">Footer slot</div>
+    <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">Footer slot</div>
   </div>
 </article>"
 `;
 
 exports[`ChangelogVersion > renders with header slot correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">Header slot</div>
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">Header slot</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChangelogVersion > renders with image correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <div class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full">
+      <div data-slot="imageWrapper" class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full">
         <!--v-if-->
       </div>
     </div>
@@ -329,19 +329,19 @@ exports[`ChangelogVersion > renders with image correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with image slot correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <div class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image">Image slot
+      <div data-slot="imageWrapper" class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image">Image slot
         <!--v-if-->
       </div>
     </div>
@@ -351,9 +351,9 @@ exports[`ChangelogVersion > renders with image slot correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with indicator slot correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">Indicator slot</div>
-  <div class="flex flex-col mx-auto max-w-2xl">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">Indicator slot</div>
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -361,17 +361,17 @@ exports[`ChangelogVersion > renders with indicator slot correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with title correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
       <!--v-if-->
-      <h2 class="relative text-xl text-pretty font-semibold text-highlighted">
+      <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
         <!--v-if-->Title
       </h2>
       <!--v-if-->
@@ -383,17 +383,17 @@ exports[`ChangelogVersion > renders with title correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with title slot correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
       <!--v-if-->
-      <h2 class="relative text-xl text-pretty font-semibold text-highlighted">
+      <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
         <!--v-if-->Title slot
       </h2>
       <!--v-if-->
@@ -405,17 +405,17 @@ exports[`ChangelogVersion > renders with title slot correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with title slot correctly 2`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
       <!--v-if-->
-      <h2 class="relative text-xl text-pretty font-semibold text-highlighted">
+      <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
         <!--v-if-->Title slot
       </h2>
       <!--v-if-->
@@ -427,19 +427,19 @@ exports[`ChangelogVersion > renders with title slot correctly 2`] = `
 `;
 
 exports[`ChangelogVersion > renders with to & image correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
-    <div class="">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+    <div data-slot="header" class="">
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <div class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/changelog-version-image:scale-105"><a href="/changelog" tabindex="-1" aria-label="Version link" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a></div>
+      <div data-slot="imageWrapper" class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/changelog-version-image:scale-105"><a href="/changelog" tabindex="-1" aria-label="Version link" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a></div>
     </div>
     <!--v-if-->
   </div>
@@ -447,14 +447,14 @@ exports[`ChangelogVersion > renders with to & image correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with to correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -462,14 +462,14 @@ exports[`ChangelogVersion > renders with to correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders with ui correctly 1`] = `
-"<article class="relative">
-  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+"<article data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
     <!--v-if-->
-    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-      <div class="size-2 rounded-full bg-primary"></div>
+    <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div class="flex flex-col mx-auto max-w-xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-xl">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -477,9 +477,9 @@ exports[`ChangelogVersion > renders with ui correctly 1`] = `
 `;
 
 exports[`ChangelogVersion > renders without indicator correctly 1`] = `
-"<article class="relative">
+"<article data-slot="root" class="relative">
   <!--v-if-->
-  <div class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
     <!--v-if-->
     <!--v-if-->
   </div>
diff --git a/test/components/__snapshots__/ChangelogVersions-vue.spec.ts.snap b/test/components/__snapshots__/ChangelogVersions-vue.spec.ts.snap
index dbeb9a6ef8..c6255ec328 100644
--- a/test/components/__snapshots__/ChangelogVersions-vue.spec.ts.snap
+++ b/test/components/__snapshots__/ChangelogVersions-vue.spec.ts.snap
@@ -1,38 +1,38 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ChangelogVersions > renders with as correctly 1`] = `
-"<section class="relative">
-  <div class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]">
-    <div class="absolute start-0 top-0 w-full bg-primary will-change-[height]" style="height: 0%;"></div>
+"<section data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]">
+    <div data-slot="beam" class="absolute start-0 top-0 w-full bg-primary will-change-[height]" style="height: 0%;"></div>
   </div>
-  <div class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
+  <div data-slot="container" class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
     <!---->
     <!---->
-    <article class="relative">
-      <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-12-13T09:32:32.598Z" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
-        <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-          <div class="size-2 rounded-full bg-primary"></div>
+    <article data-slot="root" class="relative">
+      <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
+        <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+          <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
         </div>
       </div>
-      <div class="flex flex-col mx-auto max-w-2xl">
-        <div class="">
-          <div class="flex items-center gap-3 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span class="truncate">Badge</span>
-            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
+      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+        <div data-slot="header" class="">
+          <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
           </div>
-          <h2 class="relative text-xl text-pretty font-semibold text-highlighted">
+          <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
             <!--v-if-->Title 1
           </h2>
-          <div class="text-base text-pretty text-muted mt-1">Description 1</div>
-          <div class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full">
+          <div data-slot="description" class="text-base text-pretty text-muted mt-1">Description 1</div>
+          <div data-slot="imageWrapper" class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full">
             <!--v-if-->
           </div>
         </div>
-        <div class="border-t border-default pt-5 flex items-center justify-between mt-5">
-          <div class="flex flex-wrap gap-x-4 gap-y-1.5">
-            <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-              <div class="">
+        <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
+          <div data-slot="authors" class="flex flex-wrap gap-x-4 gap-y-1.5">
+            <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+              <div data-slot="wrapper" class="">
                 <!--v-if-->
-                <p class="font-medium text-highlighted text-sm">benjamincanac</p>
+                <p data-slot="name" class="font-medium text-highlighted text-sm">benjamincanac</p>
                 <!--v-if-->
               </div>
             </div>
@@ -45,38 +45,38 @@ exports[`ChangelogVersions > renders with as correctly 1`] = `
 `;
 
 exports[`ChangelogVersions > renders with class correctly 1`] = `
-"<div class="absolute">
-  <div class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]">
-    <div class="absolute start-0 top-0 w-full bg-primary will-change-[height]" style="height: 0%;"></div>
+"<div data-slot="root" class="absolute">
+  <div data-slot="indicator" class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]">
+    <div data-slot="beam" class="absolute start-0 top-0 w-full bg-primary will-change-[height]" style="height: 0%;"></div>
   </div>
-  <div class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
+  <div data-slot="container" class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
     <!---->
     <!---->
-    <article class="relative">
-      <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-12-13T09:32:32.598Z" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
-        <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-          <div class="size-2 rounded-full bg-primary"></div>
+    <article data-slot="root" class="relative">
+      <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
+        <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+          <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
         </div>
       </div>
-      <div class="flex flex-col mx-auto max-w-2xl">
-        <div class="">
-          <div class="flex items-center gap-3 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span class="truncate">Badge</span>
-            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
+      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+        <div data-slot="header" class="">
+          <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
           </div>
-          <h2 class="relative text-xl text-pretty font-semibold text-highlighted">
+          <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
             <!--v-if-->Title 1
           </h2>
-          <div class="text-base text-pretty text-muted mt-1">Description 1</div>
-          <div class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full">
+          <div data-slot="description" class="text-base text-pretty text-muted mt-1">Description 1</div>
+          <div data-slot="imageWrapper" class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full">
             <!--v-if-->
           </div>
         </div>
-        <div class="border-t border-default pt-5 flex items-center justify-between mt-5">
-          <div class="flex flex-wrap gap-x-4 gap-y-1.5">
-            <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-              <div class="">
+        <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
+          <div data-slot="authors" class="flex flex-wrap gap-x-4 gap-y-1.5">
+            <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+              <div data-slot="wrapper" class="">
                 <!--v-if-->
-                <p class="font-medium text-highlighted text-sm">benjamincanac</p>
+                <p data-slot="name" class="font-medium text-highlighted text-sm">benjamincanac</p>
                 <!--v-if-->
               </div>
             </div>
@@ -89,45 +89,45 @@ exports[`ChangelogVersions > renders with class correctly 1`] = `
 `;
 
 exports[`ChangelogVersions > renders with default slot correctly 1`] = `
-"<div class="relative">
-  <div class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]">
-    <div class="absolute start-0 top-0 w-full bg-primary will-change-[height]" style="height: 0%;"></div>
+"<div data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]">
+    <div data-slot="beam" class="absolute start-0 top-0 w-full bg-primary will-change-[height]" style="height: 0%;"></div>
   </div>
-  <div class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">Default slot</div>
+  <div data-slot="container" class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">Default slot</div>
 </div>"
 `;
 
 exports[`ChangelogVersions > renders with indicator slot correctly 1`] = `
-"<div class="relative">
-  <div class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]">Indicator slot</div>
-  <div class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
+"<div data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]">Indicator slot</div>
+  <div data-slot="container" class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
     <!---->
     <!---->
-    <article class="relative">
-      <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-12-13T09:32:32.598Z" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
-        <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-          <div class="size-2 rounded-full bg-primary"></div>
+    <article data-slot="root" class="relative">
+      <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
+        <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+          <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
         </div>
       </div>
-      <div class="flex flex-col mx-auto max-w-2xl">
-        <div class="">
-          <div class="flex items-center gap-3 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span class="truncate">Badge</span>
-            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
+      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+        <div data-slot="header" class="">
+          <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
           </div>
-          <h2 class="relative text-xl text-pretty font-semibold text-highlighted">
+          <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
             <!--v-if-->Title 1
           </h2>
-          <div class="text-base text-pretty text-muted mt-1">Description 1</div>
-          <div class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full">
+          <div data-slot="description" class="text-base text-pretty text-muted mt-1">Description 1</div>
+          <div data-slot="imageWrapper" class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full">
             <!--v-if-->
           </div>
         </div>
-        <div class="border-t border-default pt-5 flex items-center justify-between mt-5">
-          <div class="flex flex-wrap gap-x-4 gap-y-1.5">
-            <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-              <div class="">
+        <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
+          <div data-slot="authors" class="flex flex-wrap gap-x-4 gap-y-1.5">
+            <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+              <div data-slot="wrapper" class="">
                 <!--v-if-->
-                <p class="font-medium text-highlighted text-sm">benjamincanac</p>
+                <p data-slot="name" class="font-medium text-highlighted text-sm">benjamincanac</p>
                 <!--v-if-->
               </div>
             </div>
@@ -140,38 +140,38 @@ exports[`ChangelogVersions > renders with indicator slot correctly 1`] = `
 `;
 
 exports[`ChangelogVersions > renders with ui correctly 1`] = `
-"<div class="relative">
-  <div class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px -ms-[8.5px] bg-primary">
-    <div class="absolute start-0 top-0 w-full bg-primary will-change-[height]" style="height: 0%;"></div>
+"<div data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px -ms-[8.5px] bg-primary">
+    <div data-slot="beam" class="absolute start-0 top-0 w-full bg-primary will-change-[height]" style="height: 0%;"></div>
   </div>
-  <div class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
+  <div data-slot="container" class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
     <!---->
     <!---->
-    <article class="relative">
-      <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-12-13T09:32:32.598Z" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
-        <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-          <div class="size-2 rounded-full bg-primary"></div>
+    <article data-slot="root" class="relative">
+      <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
+        <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+          <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
         </div>
       </div>
-      <div class="flex flex-col mx-auto max-w-2xl">
-        <div class="">
-          <div class="flex items-center gap-3 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span class="truncate">Badge</span>
-            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
+      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+        <div data-slot="header" class="">
+          <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
           </div>
-          <h2 class="relative text-xl text-pretty font-semibold text-highlighted">
+          <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
             <!--v-if-->Title 1
           </h2>
-          <div class="text-base text-pretty text-muted mt-1">Description 1</div>
-          <div class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full">
+          <div data-slot="description" class="text-base text-pretty text-muted mt-1">Description 1</div>
+          <div data-slot="imageWrapper" class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full">
             <!--v-if-->
           </div>
         </div>
-        <div class="border-t border-default pt-5 flex items-center justify-between mt-5">
-          <div class="flex flex-wrap gap-x-4 gap-y-1.5">
-            <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-              <div class="">
+        <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
+          <div data-slot="authors" class="flex flex-wrap gap-x-4 gap-y-1.5">
+            <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+              <div data-slot="wrapper" class="">
                 <!--v-if-->
-                <p class="font-medium text-highlighted text-sm">benjamincanac</p>
+                <p data-slot="name" class="font-medium text-highlighted text-sm">benjamincanac</p>
                 <!--v-if-->
               </div>
             </div>
@@ -184,38 +184,38 @@ exports[`ChangelogVersions > renders with ui correctly 1`] = `
 `;
 
 exports[`ChangelogVersions > renders with versions correctly 1`] = `
-"<div class="relative">
-  <div class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]">
-    <div class="absolute start-0 top-0 w-full bg-primary will-change-[height]" style="height: 0%;"></div>
+"<div data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]">
+    <div data-slot="beam" class="absolute start-0 top-0 w-full bg-primary will-change-[height]" style="height: 0%;"></div>
   </div>
-  <div class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
+  <div data-slot="container" class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
     <!---->
     <!---->
-    <article class="relative">
-      <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-12-13T09:32:32.598Z" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
-        <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-          <div class="size-2 rounded-full bg-primary"></div>
+    <article data-slot="root" class="relative">
+      <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
+        <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+          <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
         </div>
       </div>
-      <div class="flex flex-col mx-auto max-w-2xl">
-        <div class="">
-          <div class="flex items-center gap-3 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span class="truncate">Badge</span>
-            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
+      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+        <div data-slot="header" class="">
+          <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
           </div>
-          <h2 class="relative text-xl text-pretty font-semibold text-highlighted">
+          <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
             <!--v-if-->Title 1
           </h2>
-          <div class="text-base text-pretty text-muted mt-1">Description 1</div>
-          <div class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full">
+          <div data-slot="description" class="text-base text-pretty text-muted mt-1">Description 1</div>
+          <div data-slot="imageWrapper" class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full">
             <!--v-if-->
           </div>
         </div>
-        <div class="border-t border-default pt-5 flex items-center justify-between mt-5">
-          <div class="flex flex-wrap gap-x-4 gap-y-1.5">
-            <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-              <div class="">
+        <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
+          <div data-slot="authors" class="flex flex-wrap gap-x-4 gap-y-1.5">
+            <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+              <div data-slot="wrapper" class="">
                 <!--v-if-->
-                <p class="font-medium text-highlighted text-sm">benjamincanac</p>
+                <p data-slot="name" class="font-medium text-highlighted text-sm">benjamincanac</p>
                 <!--v-if-->
               </div>
             </div>
@@ -228,32 +228,32 @@ exports[`ChangelogVersions > renders with versions correctly 1`] = `
 `;
 
 exports[`ChangelogVersions > renders without indicator correctly 1`] = `
-"<div class="relative">
+"<div data-slot="root" class="relative">
   <!--v-if-->
-  <div class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
+  <div data-slot="container" class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
     <!---->
     <!---->
-    <article class="relative">
+    <article data-slot="root" class="relative">
       <!--v-if-->
-      <div class="flex flex-col mx-auto max-w-2xl">
-        <div class="">
-          <div class="flex items-center gap-3 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span class="truncate">Badge</span>
-            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
+      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+        <div data-slot="header" class="">
+          <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
           </div>
-          <h2 class="relative text-xl text-pretty font-semibold text-highlighted">
+          <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
             <!--v-if-->Title 1
           </h2>
-          <div class="text-base text-pretty text-muted mt-1">Description 1</div>
-          <div class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full">
+          <div data-slot="description" class="text-base text-pretty text-muted mt-1">Description 1</div>
+          <div data-slot="imageWrapper" class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full">
             <!--v-if-->
           </div>
         </div>
-        <div class="border-t border-default pt-5 flex items-center justify-between mt-5">
-          <div class="flex flex-wrap gap-x-4 gap-y-1.5">
-            <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-              <div class="">
+        <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
+          <div data-slot="authors" class="flex flex-wrap gap-x-4 gap-y-1.5">
+            <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+              <div data-slot="wrapper" class="">
                 <!--v-if-->
-                <p class="font-medium text-highlighted text-sm">benjamincanac</p>
+                <p data-slot="name" class="font-medium text-highlighted text-sm">benjamincanac</p>
                 <!--v-if-->
               </div>
             </div>
diff --git a/test/components/__snapshots__/ChangelogVersions.spec.ts.snap b/test/components/__snapshots__/ChangelogVersions.spec.ts.snap
index dbeb9a6ef8..c6255ec328 100644
--- a/test/components/__snapshots__/ChangelogVersions.spec.ts.snap
+++ b/test/components/__snapshots__/ChangelogVersions.spec.ts.snap
@@ -1,38 +1,38 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ChangelogVersions > renders with as correctly 1`] = `
-"<section class="relative">
-  <div class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]">
-    <div class="absolute start-0 top-0 w-full bg-primary will-change-[height]" style="height: 0%;"></div>
+"<section data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]">
+    <div data-slot="beam" class="absolute start-0 top-0 w-full bg-primary will-change-[height]" style="height: 0%;"></div>
   </div>
-  <div class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
+  <div data-slot="container" class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
     <!---->
     <!---->
-    <article class="relative">
-      <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-12-13T09:32:32.598Z" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
-        <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-          <div class="size-2 rounded-full bg-primary"></div>
+    <article data-slot="root" class="relative">
+      <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
+        <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+          <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
         </div>
       </div>
-      <div class="flex flex-col mx-auto max-w-2xl">
-        <div class="">
-          <div class="flex items-center gap-3 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span class="truncate">Badge</span>
-            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
+      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+        <div data-slot="header" class="">
+          <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
           </div>
-          <h2 class="relative text-xl text-pretty font-semibold text-highlighted">
+          <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
             <!--v-if-->Title 1
           </h2>
-          <div class="text-base text-pretty text-muted mt-1">Description 1</div>
-          <div class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full">
+          <div data-slot="description" class="text-base text-pretty text-muted mt-1">Description 1</div>
+          <div data-slot="imageWrapper" class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full">
             <!--v-if-->
           </div>
         </div>
-        <div class="border-t border-default pt-5 flex items-center justify-between mt-5">
-          <div class="flex flex-wrap gap-x-4 gap-y-1.5">
-            <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-              <div class="">
+        <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
+          <div data-slot="authors" class="flex flex-wrap gap-x-4 gap-y-1.5">
+            <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+              <div data-slot="wrapper" class="">
                 <!--v-if-->
-                <p class="font-medium text-highlighted text-sm">benjamincanac</p>
+                <p data-slot="name" class="font-medium text-highlighted text-sm">benjamincanac</p>
                 <!--v-if-->
               </div>
             </div>
@@ -45,38 +45,38 @@ exports[`ChangelogVersions > renders with as correctly 1`] = `
 `;
 
 exports[`ChangelogVersions > renders with class correctly 1`] = `
-"<div class="absolute">
-  <div class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]">
-    <div class="absolute start-0 top-0 w-full bg-primary will-change-[height]" style="height: 0%;"></div>
+"<div data-slot="root" class="absolute">
+  <div data-slot="indicator" class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]">
+    <div data-slot="beam" class="absolute start-0 top-0 w-full bg-primary will-change-[height]" style="height: 0%;"></div>
   </div>
-  <div class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
+  <div data-slot="container" class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
     <!---->
     <!---->
-    <article class="relative">
-      <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-12-13T09:32:32.598Z" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
-        <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-          <div class="size-2 rounded-full bg-primary"></div>
+    <article data-slot="root" class="relative">
+      <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
+        <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+          <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
         </div>
       </div>
-      <div class="flex flex-col mx-auto max-w-2xl">
-        <div class="">
-          <div class="flex items-center gap-3 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span class="truncate">Badge</span>
-            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
+      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+        <div data-slot="header" class="">
+          <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
           </div>
-          <h2 class="relative text-xl text-pretty font-semibold text-highlighted">
+          <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
             <!--v-if-->Title 1
           </h2>
-          <div class="text-base text-pretty text-muted mt-1">Description 1</div>
-          <div class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full">
+          <div data-slot="description" class="text-base text-pretty text-muted mt-1">Description 1</div>
+          <div data-slot="imageWrapper" class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full">
             <!--v-if-->
           </div>
         </div>
-        <div class="border-t border-default pt-5 flex items-center justify-between mt-5">
-          <div class="flex flex-wrap gap-x-4 gap-y-1.5">
-            <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-              <div class="">
+        <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
+          <div data-slot="authors" class="flex flex-wrap gap-x-4 gap-y-1.5">
+            <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+              <div data-slot="wrapper" class="">
                 <!--v-if-->
-                <p class="font-medium text-highlighted text-sm">benjamincanac</p>
+                <p data-slot="name" class="font-medium text-highlighted text-sm">benjamincanac</p>
                 <!--v-if-->
               </div>
             </div>
@@ -89,45 +89,45 @@ exports[`ChangelogVersions > renders with class correctly 1`] = `
 `;
 
 exports[`ChangelogVersions > renders with default slot correctly 1`] = `
-"<div class="relative">
-  <div class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]">
-    <div class="absolute start-0 top-0 w-full bg-primary will-change-[height]" style="height: 0%;"></div>
+"<div data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]">
+    <div data-slot="beam" class="absolute start-0 top-0 w-full bg-primary will-change-[height]" style="height: 0%;"></div>
   </div>
-  <div class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">Default slot</div>
+  <div data-slot="container" class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">Default slot</div>
 </div>"
 `;
 
 exports[`ChangelogVersions > renders with indicator slot correctly 1`] = `
-"<div class="relative">
-  <div class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]">Indicator slot</div>
-  <div class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
+"<div data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]">Indicator slot</div>
+  <div data-slot="container" class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
     <!---->
     <!---->
-    <article class="relative">
-      <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-12-13T09:32:32.598Z" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
-        <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-          <div class="size-2 rounded-full bg-primary"></div>
+    <article data-slot="root" class="relative">
+      <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
+        <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+          <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
         </div>
       </div>
-      <div class="flex flex-col mx-auto max-w-2xl">
-        <div class="">
-          <div class="flex items-center gap-3 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span class="truncate">Badge</span>
-            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
+      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+        <div data-slot="header" class="">
+          <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
           </div>
-          <h2 class="relative text-xl text-pretty font-semibold text-highlighted">
+          <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
             <!--v-if-->Title 1
           </h2>
-          <div class="text-base text-pretty text-muted mt-1">Description 1</div>
-          <div class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full">
+          <div data-slot="description" class="text-base text-pretty text-muted mt-1">Description 1</div>
+          <div data-slot="imageWrapper" class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full">
             <!--v-if-->
           </div>
         </div>
-        <div class="border-t border-default pt-5 flex items-center justify-between mt-5">
-          <div class="flex flex-wrap gap-x-4 gap-y-1.5">
-            <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-              <div class="">
+        <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
+          <div data-slot="authors" class="flex flex-wrap gap-x-4 gap-y-1.5">
+            <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+              <div data-slot="wrapper" class="">
                 <!--v-if-->
-                <p class="font-medium text-highlighted text-sm">benjamincanac</p>
+                <p data-slot="name" class="font-medium text-highlighted text-sm">benjamincanac</p>
                 <!--v-if-->
               </div>
             </div>
@@ -140,38 +140,38 @@ exports[`ChangelogVersions > renders with indicator slot correctly 1`] = `
 `;
 
 exports[`ChangelogVersions > renders with ui correctly 1`] = `
-"<div class="relative">
-  <div class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px -ms-[8.5px] bg-primary">
-    <div class="absolute start-0 top-0 w-full bg-primary will-change-[height]" style="height: 0%;"></div>
+"<div data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px -ms-[8.5px] bg-primary">
+    <div data-slot="beam" class="absolute start-0 top-0 w-full bg-primary will-change-[height]" style="height: 0%;"></div>
   </div>
-  <div class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
+  <div data-slot="container" class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
     <!---->
     <!---->
-    <article class="relative">
-      <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-12-13T09:32:32.598Z" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
-        <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-          <div class="size-2 rounded-full bg-primary"></div>
+    <article data-slot="root" class="relative">
+      <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
+        <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+          <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
         </div>
       </div>
-      <div class="flex flex-col mx-auto max-w-2xl">
-        <div class="">
-          <div class="flex items-center gap-3 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span class="truncate">Badge</span>
-            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
+      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+        <div data-slot="header" class="">
+          <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
           </div>
-          <h2 class="relative text-xl text-pretty font-semibold text-highlighted">
+          <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
             <!--v-if-->Title 1
           </h2>
-          <div class="text-base text-pretty text-muted mt-1">Description 1</div>
-          <div class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full">
+          <div data-slot="description" class="text-base text-pretty text-muted mt-1">Description 1</div>
+          <div data-slot="imageWrapper" class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full">
             <!--v-if-->
           </div>
         </div>
-        <div class="border-t border-default pt-5 flex items-center justify-between mt-5">
-          <div class="flex flex-wrap gap-x-4 gap-y-1.5">
-            <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-              <div class="">
+        <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
+          <div data-slot="authors" class="flex flex-wrap gap-x-4 gap-y-1.5">
+            <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+              <div data-slot="wrapper" class="">
                 <!--v-if-->
-                <p class="font-medium text-highlighted text-sm">benjamincanac</p>
+                <p data-slot="name" class="font-medium text-highlighted text-sm">benjamincanac</p>
                 <!--v-if-->
               </div>
             </div>
@@ -184,38 +184,38 @@ exports[`ChangelogVersions > renders with ui correctly 1`] = `
 `;
 
 exports[`ChangelogVersions > renders with versions correctly 1`] = `
-"<div class="relative">
-  <div class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]">
-    <div class="absolute start-0 top-0 w-full bg-primary will-change-[height]" style="height: 0%;"></div>
+"<div data-slot="root" class="relative">
+  <div data-slot="indicator" class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]">
+    <div data-slot="beam" class="absolute start-0 top-0 w-full bg-primary will-change-[height]" style="height: 0%;"></div>
   </div>
-  <div class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
+  <div data-slot="container" class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
     <!---->
     <!---->
-    <article class="relative">
-      <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-12-13T09:32:32.598Z" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
-        <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
-          <div class="size-2 rounded-full bg-primary"></div>
+    <article data-slot="root" class="relative">
+      <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
+        <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+          <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
         </div>
       </div>
-      <div class="flex flex-col mx-auto max-w-2xl">
-        <div class="">
-          <div class="flex items-center gap-3 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span class="truncate">Badge</span>
-            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
+      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+        <div data-slot="header" class="">
+          <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
           </div>
-          <h2 class="relative text-xl text-pretty font-semibold text-highlighted">
+          <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
             <!--v-if-->Title 1
           </h2>
-          <div class="text-base text-pretty text-muted mt-1">Description 1</div>
-          <div class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full">
+          <div data-slot="description" class="text-base text-pretty text-muted mt-1">Description 1</div>
+          <div data-slot="imageWrapper" class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full">
             <!--v-if-->
           </div>
         </div>
-        <div class="border-t border-default pt-5 flex items-center justify-between mt-5">
-          <div class="flex flex-wrap gap-x-4 gap-y-1.5">
-            <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-              <div class="">
+        <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
+          <div data-slot="authors" class="flex flex-wrap gap-x-4 gap-y-1.5">
+            <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+              <div data-slot="wrapper" class="">
                 <!--v-if-->
-                <p class="font-medium text-highlighted text-sm">benjamincanac</p>
+                <p data-slot="name" class="font-medium text-highlighted text-sm">benjamincanac</p>
                 <!--v-if-->
               </div>
             </div>
@@ -228,32 +228,32 @@ exports[`ChangelogVersions > renders with versions correctly 1`] = `
 `;
 
 exports[`ChangelogVersions > renders without indicator correctly 1`] = `
-"<div class="relative">
+"<div data-slot="root" class="relative">
   <!--v-if-->
-  <div class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
+  <div data-slot="container" class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
     <!---->
     <!---->
-    <article class="relative">
+    <article data-slot="root" class="relative">
       <!--v-if-->
-      <div class="flex flex-col mx-auto max-w-2xl">
-        <div class="">
-          <div class="flex items-center gap-3 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span class="truncate">Badge</span>
-            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
+      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+        <div data-slot="header" class="">
+          <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
+            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
           </div>
-          <h2 class="relative text-xl text-pretty font-semibold text-highlighted">
+          <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
             <!--v-if-->Title 1
           </h2>
-          <div class="text-base text-pretty text-muted mt-1">Description 1</div>
-          <div class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full">
+          <div data-slot="description" class="text-base text-pretty text-muted mt-1">Description 1</div>
+          <div data-slot="imageWrapper" class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full">
             <!--v-if-->
           </div>
         </div>
-        <div class="border-t border-default pt-5 flex items-center justify-between mt-5">
-          <div class="flex flex-wrap gap-x-4 gap-y-1.5">
-            <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-              <div class="">
+        <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
+          <div data-slot="authors" class="flex flex-wrap gap-x-4 gap-y-1.5">
+            <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+              <div data-slot="wrapper" class="">
                 <!--v-if-->
-                <p class="font-medium text-highlighted text-sm">benjamincanac</p>
+                <p data-slot="name" class="font-medium text-highlighted text-sm">benjamincanac</p>
                 <!--v-if-->
               </div>
             </div>
diff --git a/test/components/__snapshots__/ChatMessage-vue.spec.ts.snap b/test/components/__snapshots__/ChatMessage-vue.spec.ts.snap
index 3704182499..da53302b83 100644
--- a/test/components/__snapshots__/ChatMessage-vue.spec.ts.snap
+++ b/test/components/__snapshots__/ChatMessage-vue.spec.ts.snap
@@ -1,160 +1,160 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ChatMessage > renders with as correctly 1`] = `
-"<section data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
+"<section data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </section>"
 `;
 
 exports[`ChatMessage > renders with avatar correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
-    <div class="inline-flex items-center justify-center min-h-6"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></div>
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
+    <div data-slot="leading" class="inline-flex items-center justify-center min-h-6"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with class correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with compact correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-3">
-  <div class="relative flex items-start gap-1.5 pb-3">
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-3">
+  <div data-slot="container" class="relative flex items-start gap-1.5 pb-3">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with content correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with content slot correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Content slot</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Content slot</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with icon correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
-    <div class="inline-flex items-center justify-center min-h-6"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-8"></svg></div>
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
+    <div data-slot="leading" class="inline-flex items-center justify-center min-h-6"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-8"></svg></div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with parts correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with role assistant correctly 1`] = `
-"<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
+"<article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with side right correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with ui correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with variant naked correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with variant outline correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-default ring ring-default px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-default ring ring-default px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with variant soft correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with variant solid correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-inverted text-inverted px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-inverted text-inverted px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with variant subtle correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 ring ring-default px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 ring ring-default px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
diff --git a/test/components/__snapshots__/ChatMessage.spec.ts.snap b/test/components/__snapshots__/ChatMessage.spec.ts.snap
index e23a570766..070925a5fa 100644
--- a/test/components/__snapshots__/ChatMessage.spec.ts.snap
+++ b/test/components/__snapshots__/ChatMessage.spec.ts.snap
@@ -1,160 +1,160 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ChatMessage > renders with as correctly 1`] = `
-"<section data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
+"<section data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </section>"
 `;
 
 exports[`ChatMessage > renders with avatar correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
-    <div class="inline-flex items-center justify-center min-h-6"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></div>
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
+    <div data-slot="leading" class="inline-flex items-center justify-center min-h-6"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with class correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with compact correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-3">
-  <div class="relative flex items-start gap-1.5 pb-3">
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-3">
+  <div data-slot="container" class="relative flex items-start gap-1.5 pb-3">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with content correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with content slot correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Content slot</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Content slot</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with icon correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
-    <div class="inline-flex items-center justify-center min-h-6"><span class="iconify i-lucide:user shrink-0 size-8" aria-hidden="true"></span></div>
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
+    <div data-slot="leading" class="inline-flex items-center justify-center min-h-6"><span class="iconify i-lucide:user shrink-0 size-8" aria-hidden="true" data-slot="leadingIcon"></span></div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with parts correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with role assistant correctly 1`] = `
-"<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
+"<article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with side right correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with ui correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with variant naked correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with variant outline correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-default ring ring-default px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-default ring ring-default px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with variant soft correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with variant solid correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-inverted text-inverted px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-inverted text-inverted px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
 exports[`ChatMessage > renders with variant subtle correctly 1`] = `
-"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div class="relative flex items-start gap-3 pb-8">
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="container" class="relative flex items-start gap-3 pb-8">
     <!--v-if-->
-    <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 ring ring-default px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 ring ring-default px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
diff --git a/test/components/__snapshots__/ChatMessages-vue.spec.ts.snap b/test/components/__snapshots__/ChatMessages-vue.spec.ts.snap
index 7556ed56e3..f65d697434 100644
--- a/test/components/__snapshots__/ChatMessages-vue.spec.ts.snap
+++ b/test/components/__snapshots__/ChatMessages-vue.spec.ts.snap
@@ -1,18 +1,18 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ChatMessages > renders with assistant correctly 1`] = `
-"<div class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
-  <article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
+"<div data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
+  <article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
-      <div class="inline-flex items-center justify-center min-h-6"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span></div>
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
+      <div data-slot="leading" class="inline-flex items-center justify-center min-h-6"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span></div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
       <!--v-if-->
     </div>
   </article>
@@ -22,18 +22,18 @@ exports[`ChatMessages > renders with assistant correctly 1`] = `
 `;
 
 exports[`ChatMessages > renders with class correctly 1`] = `
-"<div class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height) max-w-3xl" style="--last-message-height: 0px;">
-  <article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
+"<div data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height) max-w-3xl" style="--last-message-height: 0px;">
+  <article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
       <!--v-if-->
     </div>
   </article>
@@ -43,18 +43,18 @@ exports[`ChatMessages > renders with class correctly 1`] = `
 `;
 
 exports[`ChatMessages > renders with compact correctly 1`] = `
-"<div class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
-  <article data-role="user" class="group/message relative w-full scroll-mt-3">
-    <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-1.5 pb-3">
+"<div data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
+  <article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-3">
+    <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-1.5 pb-3">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-2 py-1 rounded-lg min-h-8">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-2 py-1 rounded-lg min-h-8">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-3">
-    <div class="relative flex items-start rtl:justify-end gap-1.5 pb-3">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-3">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-1.5 pb-3">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
       <!--v-if-->
     </div>
   </article>
@@ -64,18 +64,18 @@ exports[`ChatMessages > renders with compact correctly 1`] = `
 `;
 
 exports[`ChatMessages > renders with content slot correctly 1`] = `
-"<div class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
-  <article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
+"<div data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
+  <article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Content slot</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Content slot</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">Content slot</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">Content slot</div>
       <!--v-if-->
     </div>
   </article>
@@ -85,32 +85,32 @@ exports[`ChatMessages > renders with content slot correctly 1`] = `
 `;
 
 exports[`ChatMessages > renders with default slot correctly 1`] = `
-"<div class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">Default slot
+"<div data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">Default slot
   <!--v-if-->
   <!---->
 </div>"
 `;
 
 exports[`ChatMessages > renders with indicator slot correctly 1`] = `
-"<div data-status="submitted" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
-  <article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
+"<div data-status="submitted" data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
+  <article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">Indicator slot</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">Indicator slot</div>
       <!--v-if-->
     </div>
   </article>
@@ -119,18 +119,18 @@ exports[`ChatMessages > renders with indicator slot correctly 1`] = `
 `;
 
 exports[`ChatMessages > renders with messages correctly 1`] = `
-"<div class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
-  <article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
+"<div data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
+  <article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
       <!--v-if-->
     </div>
   </article>
@@ -140,18 +140,18 @@ exports[`ChatMessages > renders with messages correctly 1`] = `
 `;
 
 exports[`ChatMessages > renders with status error correctly 1`] = `
-"<div data-status="error" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
-  <article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
+"<div data-status="error" data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
+  <article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
       <!--v-if-->
     </div>
   </article>
@@ -161,18 +161,18 @@ exports[`ChatMessages > renders with status error correctly 1`] = `
 `;
 
 exports[`ChatMessages > renders with status ready correctly 1`] = `
-"<div data-status="ready" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
-  <article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
+"<div data-status="ready" data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
+  <article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
       <!--v-if-->
     </div>
   </article>
@@ -182,18 +182,18 @@ exports[`ChatMessages > renders with status ready correctly 1`] = `
 `;
 
 exports[`ChatMessages > renders with status streaming correctly 1`] = `
-"<div data-status="streaming" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
-  <article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
+"<div data-status="streaming" data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
+  <article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
       <!--v-if-->
     </div>
   </article>
@@ -203,26 +203,26 @@ exports[`ChatMessages > renders with status streaming correctly 1`] = `
 `;
 
 exports[`ChatMessages > renders with status submitted correctly 1`] = `
-"<div data-status="submitted" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
-  <article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
+"<div data-status="submitted" data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
+  <article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">
-        <div class="h-6 flex items-center gap-1 py-3 *:size-2 *:rounded-full *:bg-elevated [&amp;>*:nth-child(1)]:animate-[bounce_1s_infinite] [&amp;>*:nth-child(2)]:animate-[bounce_1s_0.15s_infinite] [&amp;>*:nth-child(3)]:animate-[bounce_1s_0.3s_infinite]"><span></span><span></span><span></span></div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">
+        <div data-slot="indicator" class="h-6 flex items-center gap-1 py-3 *:size-2 *:rounded-full *:bg-elevated [&amp;>*:nth-child(1)]:animate-[bounce_1s_infinite] [&amp;>*:nth-child(2)]:animate-[bounce_1s_0.15s_infinite] [&amp;>*:nth-child(3)]:animate-[bounce_1s_0.3s_infinite]"><span></span><span></span><span></span></div>
       </div>
       <!--v-if-->
     </div>
@@ -232,18 +232,18 @@ exports[`ChatMessages > renders with status submitted correctly 1`] = `
 `;
 
 exports[`ChatMessages > renders with ui correctly 1`] = `
-"<div class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
-  <article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
+"<div data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
+  <article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
       <!--v-if-->
     </div>
   </article>
@@ -253,18 +253,18 @@ exports[`ChatMessages > renders with ui correctly 1`] = `
 `;
 
 exports[`ChatMessages > renders with user correctly 1`] = `
-"<div class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
-  <article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
-      <div class="inline-flex items-center justify-center min-h-6 mt-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></div>
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+"<div data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
+  <article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
+      <div data-slot="leading" class="inline-flex items-center justify-center min-h-6 mt-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
       <!--v-if-->
     </div>
   </article>
@@ -274,18 +274,18 @@ exports[`ChatMessages > renders with user correctly 1`] = `
 `;
 
 exports[`ChatMessages > renders with viewport slot correctly 1`] = `
-"<div class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
-  <article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
+"<div data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
+  <article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
       <!--v-if-->
     </div>
   </article>
diff --git a/test/components/__snapshots__/ChatMessages.spec.ts.snap b/test/components/__snapshots__/ChatMessages.spec.ts.snap
index b83b096a4a..6763b4fa32 100644
--- a/test/components/__snapshots__/ChatMessages.spec.ts.snap
+++ b/test/components/__snapshots__/ChatMessages.spec.ts.snap
@@ -1,18 +1,18 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ChatMessages > renders with assistant correctly 1`] = `
-"<div class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
-  <article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
+"<div data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
+  <article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
-      <div class="inline-flex items-center justify-center min-h-6"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:bot text-muted shrink-0" aria-hidden="true"></span></span></div>
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
+      <div data-slot="leading" class="inline-flex items-center justify-center min-h-6"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:bot text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span></div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
       <!--v-if-->
     </div>
   </article>
@@ -22,18 +22,18 @@ exports[`ChatMessages > renders with assistant correctly 1`] = `
 `;
 
 exports[`ChatMessages > renders with class correctly 1`] = `
-"<div class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height) max-w-3xl" style="--last-message-height: 0px;">
-  <article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
+"<div data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height) max-w-3xl" style="--last-message-height: 0px;">
+  <article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
       <!--v-if-->
     </div>
   </article>
@@ -43,18 +43,18 @@ exports[`ChatMessages > renders with class correctly 1`] = `
 `;
 
 exports[`ChatMessages > renders with compact correctly 1`] = `
-"<div class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
-  <article data-role="user" class="group/message relative w-full scroll-mt-3">
-    <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-1.5 pb-3">
+"<div data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
+  <article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-3">
+    <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-1.5 pb-3">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-2 py-1 rounded-lg min-h-8">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-2 py-1 rounded-lg min-h-8">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-3">
-    <div class="relative flex items-start rtl:justify-end gap-1.5 pb-3">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-3">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-1.5 pb-3">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
       <!--v-if-->
     </div>
   </article>
@@ -64,18 +64,18 @@ exports[`ChatMessages > renders with compact correctly 1`] = `
 `;
 
 exports[`ChatMessages > renders with content slot correctly 1`] = `
-"<div class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
-  <article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
+"<div data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
+  <article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Content slot</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Content slot</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">Content slot</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">Content slot</div>
       <!--v-if-->
     </div>
   </article>
@@ -85,32 +85,32 @@ exports[`ChatMessages > renders with content slot correctly 1`] = `
 `;
 
 exports[`ChatMessages > renders with default slot correctly 1`] = `
-"<div class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">Default slot
+"<div data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">Default slot
   <!--v-if-->
   <!---->
 </div>"
 `;
 
 exports[`ChatMessages > renders with indicator slot correctly 1`] = `
-"<div data-status="submitted" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
-  <article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
+"<div data-status="submitted" data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
+  <article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">Indicator slot</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">Indicator slot</div>
       <!--v-if-->
     </div>
   </article>
@@ -119,18 +119,18 @@ exports[`ChatMessages > renders with indicator slot correctly 1`] = `
 `;
 
 exports[`ChatMessages > renders with messages correctly 1`] = `
-"<div class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
-  <article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
+"<div data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
+  <article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
       <!--v-if-->
     </div>
   </article>
@@ -140,18 +140,18 @@ exports[`ChatMessages > renders with messages correctly 1`] = `
 `;
 
 exports[`ChatMessages > renders with status error correctly 1`] = `
-"<div data-status="error" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
-  <article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
+"<div data-status="error" data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
+  <article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
       <!--v-if-->
     </div>
   </article>
@@ -161,18 +161,18 @@ exports[`ChatMessages > renders with status error correctly 1`] = `
 `;
 
 exports[`ChatMessages > renders with status ready correctly 1`] = `
-"<div data-status="ready" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
-  <article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
+"<div data-status="ready" data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
+  <article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
       <!--v-if-->
     </div>
   </article>
@@ -182,18 +182,18 @@ exports[`ChatMessages > renders with status ready correctly 1`] = `
 `;
 
 exports[`ChatMessages > renders with status streaming correctly 1`] = `
-"<div data-status="streaming" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
-  <article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
+"<div data-status="streaming" data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
+  <article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
       <!--v-if-->
     </div>
   </article>
@@ -203,26 +203,26 @@ exports[`ChatMessages > renders with status streaming correctly 1`] = `
 `;
 
 exports[`ChatMessages > renders with status submitted correctly 1`] = `
-"<div data-status="submitted" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
-  <article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
+"<div data-status="submitted" data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
+  <article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">
-        <div class="h-6 flex items-center gap-1 py-3 *:size-2 *:rounded-full *:bg-elevated [&amp;>*:nth-child(1)]:animate-[bounce_1s_infinite] [&amp;>*:nth-child(2)]:animate-[bounce_1s_0.15s_infinite] [&amp;>*:nth-child(3)]:animate-[bounce_1s_0.3s_infinite]"><span></span><span></span><span></span></div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">
+        <div data-slot="indicator" class="h-6 flex items-center gap-1 py-3 *:size-2 *:rounded-full *:bg-elevated [&amp;>*:nth-child(1)]:animate-[bounce_1s_infinite] [&amp;>*:nth-child(2)]:animate-[bounce_1s_0.15s_infinite] [&amp;>*:nth-child(3)]:animate-[bounce_1s_0.3s_infinite]"><span></span><span></span><span></span></div>
       </div>
       <!--v-if-->
     </div>
@@ -232,18 +232,18 @@ exports[`ChatMessages > renders with status submitted correctly 1`] = `
 `;
 
 exports[`ChatMessages > renders with ui correctly 1`] = `
-"<div class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
-  <article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
+"<div data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
+  <article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
       <!--v-if-->
     </div>
   </article>
@@ -253,18 +253,18 @@ exports[`ChatMessages > renders with ui correctly 1`] = `
 `;
 
 exports[`ChatMessages > renders with user correctly 1`] = `
-"<div class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
-  <article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
-      <div class="inline-flex items-center justify-center min-h-6 mt-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></div>
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+"<div data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
+  <article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
+      <div data-slot="leading" class="inline-flex items-center justify-center min-h-6 mt-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
       <!--v-if-->
     </div>
   </article>
@@ -274,18 +274,18 @@ exports[`ChatMessages > renders with user correctly 1`] = `
 `;
 
 exports[`ChatMessages > renders with viewport slot correctly 1`] = `
-"<div class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
-  <article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
+"<div data-slot="root" class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
+  <article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
-  <article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-    <div class="relative flex items-start rtl:justify-end gap-3 pb-8">
+  <article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+    <div data-slot="container" class="relative flex items-start rtl:justify-end gap-3 pb-8">
       <!--v-if-->
-      <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
       <!--v-if-->
     </div>
   </article>
diff --git a/test/components/__snapshots__/ChatPalette-vue.spec.ts.snap b/test/components/__snapshots__/ChatPalette-vue.spec.ts.snap
index 304f00473d..aa06dde32d 100644
--- a/test/components/__snapshots__/ChatPalette-vue.spec.ts.snap
+++ b/test/components/__snapshots__/ChatPalette-vue.spec.ts.snap
@@ -1,35 +1,35 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ChatPalette > renders with as correctly 1`] = `
-"<section class="relative flex-1 flex flex-col min-h-0 min-w-0">
-  <div class="overflow-y-auto flex-1 flex flex-col py-3"></div>
+"<section data-slot="root" class="relative flex-1 flex flex-col min-h-0 min-w-0">
+  <div data-slot="content" class="overflow-y-auto flex-1 flex flex-col py-3"></div>
   <!--v-if-->
 </section>"
 `;
 
 exports[`ChatPalette > renders with class correctly 1`] = `
-"<div class="flex-1 flex flex-col min-h-0 min-w-0 absolute">
-  <div class="overflow-y-auto flex-1 flex flex-col py-3"></div>
+"<div data-slot="root" class="flex-1 flex flex-col min-h-0 min-w-0 absolute">
+  <div data-slot="content" class="overflow-y-auto flex-1 flex flex-col py-3"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`ChatPalette > renders with default slot correctly 1`] = `
-"<div class="relative flex-1 flex flex-col min-h-0 min-w-0">
-  <div class="overflow-y-auto flex-1 flex flex-col py-3">Default slot</div>
+"<div data-slot="root" class="relative flex-1 flex flex-col min-h-0 min-w-0">
+  <div data-slot="content" class="overflow-y-auto flex-1 flex flex-col py-3">Default slot</div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`ChatPalette > renders with prompt slot correctly 1`] = `
-"<div class="relative flex-1 flex flex-col min-h-0 min-w-0">
-  <div class="overflow-y-auto flex-1 flex flex-col py-3"></div>Prompt slot
+"<div data-slot="root" class="relative flex-1 flex flex-col min-h-0 min-w-0">
+  <div data-slot="content" class="overflow-y-auto flex-1 flex flex-col py-3"></div>Prompt slot
 </div>"
 `;
 
 exports[`ChatPalette > renders with ui correctly 1`] = `
-"<div class="relative flex-1 flex flex-col min-h-0 min-w-0">
-  <div class="overflow-y-auto flex-1 flex flex-col py-3"></div>
+"<div data-slot="root" class="relative flex-1 flex flex-col min-h-0 min-w-0">
+  <div data-slot="content" class="overflow-y-auto flex-1 flex flex-col py-3"></div>
   <!--v-if-->
 </div>"
 `;
diff --git a/test/components/__snapshots__/ChatPalette.spec.ts.snap b/test/components/__snapshots__/ChatPalette.spec.ts.snap
index 304f00473d..aa06dde32d 100644
--- a/test/components/__snapshots__/ChatPalette.spec.ts.snap
+++ b/test/components/__snapshots__/ChatPalette.spec.ts.snap
@@ -1,35 +1,35 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ChatPalette > renders with as correctly 1`] = `
-"<section class="relative flex-1 flex flex-col min-h-0 min-w-0">
-  <div class="overflow-y-auto flex-1 flex flex-col py-3"></div>
+"<section data-slot="root" class="relative flex-1 flex flex-col min-h-0 min-w-0">
+  <div data-slot="content" class="overflow-y-auto flex-1 flex flex-col py-3"></div>
   <!--v-if-->
 </section>"
 `;
 
 exports[`ChatPalette > renders with class correctly 1`] = `
-"<div class="flex-1 flex flex-col min-h-0 min-w-0 absolute">
-  <div class="overflow-y-auto flex-1 flex flex-col py-3"></div>
+"<div data-slot="root" class="flex-1 flex flex-col min-h-0 min-w-0 absolute">
+  <div data-slot="content" class="overflow-y-auto flex-1 flex flex-col py-3"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`ChatPalette > renders with default slot correctly 1`] = `
-"<div class="relative flex-1 flex flex-col min-h-0 min-w-0">
-  <div class="overflow-y-auto flex-1 flex flex-col py-3">Default slot</div>
+"<div data-slot="root" class="relative flex-1 flex flex-col min-h-0 min-w-0">
+  <div data-slot="content" class="overflow-y-auto flex-1 flex flex-col py-3">Default slot</div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`ChatPalette > renders with prompt slot correctly 1`] = `
-"<div class="relative flex-1 flex flex-col min-h-0 min-w-0">
-  <div class="overflow-y-auto flex-1 flex flex-col py-3"></div>Prompt slot
+"<div data-slot="root" class="relative flex-1 flex flex-col min-h-0 min-w-0">
+  <div data-slot="content" class="overflow-y-auto flex-1 flex flex-col py-3"></div>Prompt slot
 </div>"
 `;
 
 exports[`ChatPalette > renders with ui correctly 1`] = `
-"<div class="relative flex-1 flex flex-col min-h-0 min-w-0">
-  <div class="overflow-y-auto flex-1 flex flex-col py-3"></div>
+"<div data-slot="root" class="relative flex-1 flex flex-col min-h-0 min-w-0">
+  <div data-slot="content" class="overflow-y-auto flex-1 flex flex-col py-3"></div>
   <!--v-if-->
 </div>"
 `;
diff --git a/test/components/__snapshots__/ChatPrompt-vue.spec.ts.snap b/test/components/__snapshots__/ChatPrompt-vue.spec.ts.snap
index 5e9e3daead..807b57cc7b 100644
--- a/test/components/__snapshots__/ChatPrompt-vue.spec.ts.snap
+++ b/test/components/__snapshots__/ChatPrompt-vue.spec.ts.snap
@@ -1,9 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ChatPrompt > renders with as correctly 1`] = `
-"<section class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
+"<section data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
   <!--v-if-->
-  <div class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
+  <div data-slot="root" class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" data-slot="body" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -12,9 +12,9 @@ exports[`ChatPrompt > renders with as correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with class correctly 1`] = `
-"<form class="relative flex flex-col items-stretch gap-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default p-5">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default p-5">
   <!--v-if-->
-  <div class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
+  <div data-slot="root" class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" data-slot="body" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -23,9 +23,9 @@ exports[`ChatPrompt > renders with class correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with error correctly 1`] = `
-"<form class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
   <!--v-if-->
-  <div class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" disabled="" value=""></textarea>
+  <div data-slot="root" class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" data-slot="body" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" disabled="" value=""></textarea>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -34,20 +34,20 @@ exports[`ChatPrompt > renders with error correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with footer slot correctly 1`] = `
-"<form class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
   <!--v-if-->
-  <div class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
+  <div data-slot="root" class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" data-slot="body" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
     <!--v-if-->
     <!--v-if-->
   </div>
-  <div class="flex items-center justify-between gap-1.5">Footer slot</div>
+  <div data-slot="footer" class="flex items-center justify-between gap-1.5">Footer slot</div>
 </form>"
 `;
 
 exports[`ChatPrompt > renders with header slot correctly 1`] = `
-"<form class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
-  <div class="flex items-center gap-1.5">Header slot</div>
-  <div class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
+  <div data-slot="header" class="flex items-center gap-1.5">Header slot</div>
+  <div data-slot="root" class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" data-slot="body" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -56,9 +56,9 @@ exports[`ChatPrompt > renders with header slot correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with placeholder correctly 1`] = `
-"<form class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
   <!--v-if-->
-  <div class="relative inline-flex items-start"><textarea rows="1" placeholder="Placeholder" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
+  <div data-slot="root" class="relative inline-flex items-start"><textarea rows="1" placeholder="Placeholder" data-slot="body" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -67,9 +67,9 @@ exports[`ChatPrompt > renders with placeholder correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with ui correctly 1`] = `
-"<form class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
   <!--v-if-->
-  <div class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
+  <div data-slot="root" class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" data-slot="body" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -78,9 +78,9 @@ exports[`ChatPrompt > renders with ui correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with variant naked correctly 1`] = `
-"<form class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur">
   <!--v-if-->
-  <div class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
+  <div data-slot="root" class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" data-slot="body" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -89,9 +89,9 @@ exports[`ChatPrompt > renders with variant naked correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with variant outline correctly 1`] = `
-"<form class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
   <!--v-if-->
-  <div class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
+  <div data-slot="root" class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" data-slot="body" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -100,9 +100,9 @@ exports[`ChatPrompt > renders with variant outline correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with variant soft correctly 1`] = `
-"<form class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-elevated/50">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-elevated/50">
   <!--v-if-->
-  <div class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
+  <div data-slot="root" class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" data-slot="body" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -111,9 +111,9 @@ exports[`ChatPrompt > renders with variant soft correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with variant subtle correctly 1`] = `
-"<form class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-elevated/50 ring ring-default">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-elevated/50 ring ring-default">
   <!--v-if-->
-  <div class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
+  <div data-slot="root" class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" data-slot="body" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
     <!--v-if-->
     <!--v-if-->
   </div>
diff --git a/test/components/__snapshots__/ChatPrompt.spec.ts.snap b/test/components/__snapshots__/ChatPrompt.spec.ts.snap
index 5e9e3daead..807b57cc7b 100644
--- a/test/components/__snapshots__/ChatPrompt.spec.ts.snap
+++ b/test/components/__snapshots__/ChatPrompt.spec.ts.snap
@@ -1,9 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ChatPrompt > renders with as correctly 1`] = `
-"<section class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
+"<section data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
   <!--v-if-->
-  <div class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
+  <div data-slot="root" class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" data-slot="body" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -12,9 +12,9 @@ exports[`ChatPrompt > renders with as correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with class correctly 1`] = `
-"<form class="relative flex flex-col items-stretch gap-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default p-5">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default p-5">
   <!--v-if-->
-  <div class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
+  <div data-slot="root" class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" data-slot="body" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -23,9 +23,9 @@ exports[`ChatPrompt > renders with class correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with error correctly 1`] = `
-"<form class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
   <!--v-if-->
-  <div class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" disabled="" value=""></textarea>
+  <div data-slot="root" class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" data-slot="body" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" disabled="" value=""></textarea>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -34,20 +34,20 @@ exports[`ChatPrompt > renders with error correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with footer slot correctly 1`] = `
-"<form class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
   <!--v-if-->
-  <div class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
+  <div data-slot="root" class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" data-slot="body" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
     <!--v-if-->
     <!--v-if-->
   </div>
-  <div class="flex items-center justify-between gap-1.5">Footer slot</div>
+  <div data-slot="footer" class="flex items-center justify-between gap-1.5">Footer slot</div>
 </form>"
 `;
 
 exports[`ChatPrompt > renders with header slot correctly 1`] = `
-"<form class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
-  <div class="flex items-center gap-1.5">Header slot</div>
-  <div class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
+  <div data-slot="header" class="flex items-center gap-1.5">Header slot</div>
+  <div data-slot="root" class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" data-slot="body" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -56,9 +56,9 @@ exports[`ChatPrompt > renders with header slot correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with placeholder correctly 1`] = `
-"<form class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
   <!--v-if-->
-  <div class="relative inline-flex items-start"><textarea rows="1" placeholder="Placeholder" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
+  <div data-slot="root" class="relative inline-flex items-start"><textarea rows="1" placeholder="Placeholder" data-slot="body" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -67,9 +67,9 @@ exports[`ChatPrompt > renders with placeholder correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with ui correctly 1`] = `
-"<form class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
   <!--v-if-->
-  <div class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
+  <div data-slot="root" class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" data-slot="body" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -78,9 +78,9 @@ exports[`ChatPrompt > renders with ui correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with variant naked correctly 1`] = `
-"<form class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur">
   <!--v-if-->
-  <div class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
+  <div data-slot="root" class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" data-slot="body" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -89,9 +89,9 @@ exports[`ChatPrompt > renders with variant naked correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with variant outline correctly 1`] = `
-"<form class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default">
   <!--v-if-->
-  <div class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
+  <div data-slot="root" class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" data-slot="body" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -100,9 +100,9 @@ exports[`ChatPrompt > renders with variant outline correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with variant soft correctly 1`] = `
-"<form class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-elevated/50">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-elevated/50">
   <!--v-if-->
-  <div class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
+  <div data-slot="root" class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" data-slot="body" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -111,9 +111,9 @@ exports[`ChatPrompt > renders with variant soft correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with variant subtle correctly 1`] = `
-"<form class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-elevated/50 ring ring-default">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-elevated/50 ring ring-default">
   <!--v-if-->
-  <div class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
+  <div data-slot="root" class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" data-slot="body" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
     <!--v-if-->
     <!--v-if-->
   </div>
diff --git a/test/components/__snapshots__/ChatPromptSubmit-vue.spec.ts.snap b/test/components/__snapshots__/ChatPromptSubmit-vue.spec.ts.snap
index 83284eb2bf..6c4e3277ea 100644
--- a/test/components/__snapshots__/ChatPromptSubmit-vue.spec.ts.snap
+++ b/test/components/__snapshots__/ChatPromptSubmit-vue.spec.ts.snap
@@ -1,42 +1,42 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ChatPromptSubmit > renders with class correctly 1`] = `
-"<button type="submit" aria-label="Send prompt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<button type="submit" aria-label="Send prompt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`ChatPromptSubmit > renders with icon correctly 1`] = `
-"<button type="submit" aria-label="Send prompt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<button type="submit" aria-label="Send prompt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`ChatPromptSubmit > renders with status error correctly 1`] = `
-"<button type="button" aria-label="Send prompt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-error bg-error/10 hover:bg-error/15 active:bg-error/15 focus:outline-none focus-visible:bg-error/15 disabled:bg-error/10 aria-disabled:bg-error/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<button type="button" aria-label="Send prompt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-error bg-error/10 hover:bg-error/15 active:bg-error/15 focus:outline-none focus-visible:bg-error/15 disabled:bg-error/10 aria-disabled:bg-error/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`ChatPromptSubmit > renders with status ready correctly 1`] = `
-"<button type="submit" aria-label="Send prompt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<button type="submit" aria-label="Send prompt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`ChatPromptSubmit > renders with status streaming correctly 1`] = `
-"<button type="button" aria-label="Send prompt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<button type="button" aria-label="Send prompt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`ChatPromptSubmit > renders with status submitted correctly 1`] = `
-"<button type="button" aria-label="Send prompt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<button type="button" aria-label="Send prompt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
 </button>"
diff --git a/test/components/__snapshots__/ChatPromptSubmit.spec.ts.snap b/test/components/__snapshots__/ChatPromptSubmit.spec.ts.snap
index f184184784..0247eece73 100644
--- a/test/components/__snapshots__/ChatPromptSubmit.spec.ts.snap
+++ b/test/components/__snapshots__/ChatPromptSubmit.spec.ts.snap
@@ -1,42 +1,42 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ChatPromptSubmit > renders with class correctly 1`] = `
-"<button type="submit" aria-label="Send prompt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:arrow-up shrink-0 size-5" aria-hidden="true"></span>
+"<button type="submit" aria-label="Send prompt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:arrow-up shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`ChatPromptSubmit > renders with icon correctly 1`] = `
-"<button type="submit" aria-label="Send prompt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:send shrink-0 size-5" aria-hidden="true"></span>
+"<button type="submit" aria-label="Send prompt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:send shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`ChatPromptSubmit > renders with status error correctly 1`] = `
-"<button type="button" aria-label="Send prompt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-error bg-error/10 hover:bg-error/15 active:bg-error/15 focus:outline-none focus-visible:bg-error/15 disabled:bg-error/10 aria-disabled:bg-error/10 p-1.5"><span class="iconify i-lucide:rotate-ccw shrink-0 size-5" aria-hidden="true"></span>
+"<button type="button" aria-label="Send prompt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-error bg-error/10 hover:bg-error/15 active:bg-error/15 focus:outline-none focus-visible:bg-error/15 disabled:bg-error/10 aria-disabled:bg-error/10 p-1.5"><span class="iconify i-lucide:rotate-ccw shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`ChatPromptSubmit > renders with status ready correctly 1`] = `
-"<button type="submit" aria-label="Send prompt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:arrow-up shrink-0 size-5" aria-hidden="true"></span>
+"<button type="submit" aria-label="Send prompt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:arrow-up shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`ChatPromptSubmit > renders with status streaming correctly 1`] = `
-"<button type="button" aria-label="Send prompt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:square shrink-0 size-5" aria-hidden="true"></span>
+"<button type="button" aria-label="Send prompt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:square shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`ChatPromptSubmit > renders with status submitted correctly 1`] = `
-"<button type="button" aria-label="Send prompt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:square shrink-0 size-5" aria-hidden="true"></span>
+"<button type="button" aria-label="Send prompt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:square shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
diff --git a/test/components/__snapshots__/Checkbox-vue.spec.ts.snap b/test/components/__snapshots__/Checkbox-vue.spec.ts.snap
index 21d9bf26d6..a5fae2d698 100644
--- a/test/components/__snapshots__/Checkbox-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Checkbox-vue.spec.ts.snap
@@ -1,8 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Checkbox > renders with ariaLabel correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button aria-label="Aria label" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button aria-label="Aria label" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -11,8 +11,8 @@ exports[`Checkbox > renders with ariaLabel correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with as correctly 1`] = `
-"<section class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+"<section data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -21,8 +21,8 @@ exports[`Checkbox > renders with as correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with class correctly 1`] = `
-"<div class="relative items-start flex-row inline-flex">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+"<div data-slot="root" class="relative items-start flex-row inline-flex">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -31,8 +31,8 @@ exports[`Checkbox > renders with class correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with defaultValue correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-full"></svg></span>
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -40,32 +40,32 @@ exports[`Checkbox > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with description correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!--v-if-->
     </button></div>
-  <div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Label</label>
-    <p class="text-muted">Description</p>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Label</label>
+    <p data-slot="description" class="text-muted">Description</p>
   </div>
 </div>"
 `;
 
 exports[`Checkbox > renders with description slot correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!--v-if-->
     </button></div>
-  <div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Description slot</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Description slot</label>
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Checkbox > renders with disabled correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
       <!---->
       <!--v-if-->
     </button></div>
@@ -74,8 +74,8 @@ exports[`Checkbox > renders with disabled correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with icon correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -84,8 +84,8 @@ exports[`Checkbox > renders with icon correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with id correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -94,8 +94,8 @@ exports[`Checkbox > renders with id correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with indeterminate correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-full"></svg></span>
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -103,8 +103,8 @@ exports[`Checkbox > renders with indeterminate correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-full"></svg></span>
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -112,8 +112,8 @@ exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with indicator end correctly 1`] = `
-"<div class="relative flex items-start flex-row-reverse">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
+"<div data-slot="root" class="relative flex items-start flex-row-reverse">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -122,8 +122,8 @@ exports[`Checkbox > renders with indicator end correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with indicator hidden correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -132,8 +132,8 @@ exports[`Checkbox > renders with indicator hidden correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with indicator start correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -142,32 +142,32 @@ exports[`Checkbox > renders with indicator start correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with label correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!--v-if-->
     </button></div>
-  <div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Label</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Label</label>
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Checkbox > renders with label slot correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!--v-if-->
     </button></div>
-  <div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Label slot</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Label slot</label>
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Checkbox > renders with modelValue correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-full"></svg></span>
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -175,8 +175,8 @@ exports[`Checkbox > renders with modelValue correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with name correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -185,8 +185,8 @@ exports[`Checkbox > renders with name correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with neutral variant card correctly 1`] = `
-"<label class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
+"<label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -195,8 +195,8 @@ exports[`Checkbox > renders with neutral variant card correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with neutral variant list correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -205,8 +205,8 @@ exports[`Checkbox > renders with neutral variant list correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with primary variant card correctly 1`] = `
-"<label class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
+"<label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -215,8 +215,8 @@ exports[`Checkbox > renders with primary variant card correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with primary variant list correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -225,20 +225,20 @@ exports[`Checkbox > renders with primary variant list correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with required correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="true" data-state="unchecked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="true" data-state="unchecked">
       <!---->
       <!--v-if-->
     </button></div>
-  <div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</label>
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Checkbox > renders with size lg correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -247,8 +247,8 @@ exports[`Checkbox > renders with size lg correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with size md correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -257,8 +257,8 @@ exports[`Checkbox > renders with size md correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with size sm correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -267,8 +267,8 @@ exports[`Checkbox > renders with size sm correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with size xl correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-6"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -277,8 +277,8 @@ exports[`Checkbox > renders with size xl correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with size xs correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -287,8 +287,8 @@ exports[`Checkbox > renders with size xs correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with ui correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -297,8 +297,8 @@ exports[`Checkbox > renders with ui correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with value correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!--v-if-->
     </button></div>
diff --git a/test/components/__snapshots__/Checkbox.spec.ts.snap b/test/components/__snapshots__/Checkbox.spec.ts.snap
index 36cd2c006e..21d1bd1ceb 100644
--- a/test/components/__snapshots__/Checkbox.spec.ts.snap
+++ b/test/components/__snapshots__/Checkbox.spec.ts.snap
@@ -1,8 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Checkbox > renders with ariaLabel correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button aria-label="Aria label" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button aria-label="Aria label" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -11,8 +11,8 @@ exports[`Checkbox > renders with ariaLabel correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with as correctly 1`] = `
-"<section class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+"<section data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -21,8 +21,8 @@ exports[`Checkbox > renders with as correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with class correctly 1`] = `
-"<div class="relative items-start flex-row inline-flex">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+"<div data-slot="root" class="relative items-start flex-row inline-flex">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -31,8 +31,8 @@ exports[`Checkbox > renders with class correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with defaultValue correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -40,32 +40,32 @@ exports[`Checkbox > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with description correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!--v-if-->
     </button></div>
-  <div class="w-full ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Label</label>
-    <p class="text-muted">Description</p>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Label</label>
+    <p data-slot="description" class="text-muted">Description</p>
   </div>
 </div>"
 `;
 
 exports[`Checkbox > renders with description slot correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!--v-if-->
     </button></div>
-  <div class="w-full ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Description slot</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Description slot</label>
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Checkbox > renders with disabled correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
       <!---->
       <!--v-if-->
     </button></div>
@@ -74,8 +74,8 @@ exports[`Checkbox > renders with disabled correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with icon correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -84,8 +84,8 @@ exports[`Checkbox > renders with icon correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with id correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -94,8 +94,8 @@ exports[`Checkbox > renders with id correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with indeterminate correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:minus shrink-0 size-full" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:minus shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -103,8 +103,8 @@ exports[`Checkbox > renders with indeterminate correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:trash shrink-0 size-full" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:trash shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -112,8 +112,8 @@ exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with indicator end correctly 1`] = `
-"<div class="relative flex items-start flex-row-reverse">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
+"<div data-slot="root" class="relative flex items-start flex-row-reverse">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -122,8 +122,8 @@ exports[`Checkbox > renders with indicator end correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with indicator hidden correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -132,8 +132,8 @@ exports[`Checkbox > renders with indicator hidden correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with indicator start correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -142,32 +142,32 @@ exports[`Checkbox > renders with indicator start correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with label correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!--v-if-->
     </button></div>
-  <div class="w-full ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Label</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Label</label>
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Checkbox > renders with label slot correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!--v-if-->
     </button></div>
-  <div class="w-full ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Label slot</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Label slot</label>
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Checkbox > renders with modelValue correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -175,8 +175,8 @@ exports[`Checkbox > renders with modelValue correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with name correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -185,8 +185,8 @@ exports[`Checkbox > renders with name correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with neutral variant card correctly 1`] = `
-"<label class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
+"<label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -195,8 +195,8 @@ exports[`Checkbox > renders with neutral variant card correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with neutral variant list correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -205,8 +205,8 @@ exports[`Checkbox > renders with neutral variant list correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with primary variant card correctly 1`] = `
-"<label class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
+"<label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -215,8 +215,8 @@ exports[`Checkbox > renders with primary variant card correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with primary variant list correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -225,20 +225,20 @@ exports[`Checkbox > renders with primary variant list correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with required correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="true" data-state="unchecked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="true" data-state="unchecked">
       <!---->
       <!--v-if-->
     </button></div>
-  <div class="w-full ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0" data-slot="label" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</label>
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Checkbox > renders with size lg correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -247,8 +247,8 @@ exports[`Checkbox > renders with size lg correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with size md correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -257,8 +257,8 @@ exports[`Checkbox > renders with size md correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with size sm correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -267,8 +267,8 @@ exports[`Checkbox > renders with size sm correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with size xl correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-6"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -277,8 +277,8 @@ exports[`Checkbox > renders with size xl correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with size xs correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -287,8 +287,8 @@ exports[`Checkbox > renders with size xs correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with ui correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!--v-if-->
     </button></div>
@@ -297,8 +297,8 @@ exports[`Checkbox > renders with ui correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with value correctly 1`] = `
-"<div class="relative flex items-start flex-row">
-  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+"<div data-slot="root" class="relative flex items-start flex-row">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!--v-if-->
     </button></div>
diff --git a/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap b/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap
index c512d81ba3..c6036a4ebd 100644
--- a/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap
+++ b/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap
@@ -1,33 +1,33 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CheckboxGroup > renders with ariaLabel correctly 1`] = `
-"<div id="v-0" class="relative" aria-label="Aria label" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" aria-label="Aria label" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -37,33 +37,33 @@ exports[`CheckboxGroup > renders with ariaLabel correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with as correctly 1`] = `
-"<section id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<section id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -73,33 +73,33 @@ exports[`CheckboxGroup > renders with as correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with class correctly 1`] = `
-"<div id="v-0" class="absolute" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="absolute" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -109,32 +109,32 @@ exports[`CheckboxGroup > renders with class correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with defaultValue correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-full"></svg></span>
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -144,34 +144,34 @@ exports[`CheckboxGroup > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with description correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
-        <p class="text-muted">Description 0</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+        <p data-slot="description" class="text-muted">Description 0</p>
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
-        <p class="text-muted">Description 1</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+        <p data-slot="description" class="text-muted">Description 1</p>
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
-        <p class="text-muted">Description 2</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+        <p data-slot="description" class="text-muted">Description 2</p>
       </div>
     </div>
   </fieldset>
@@ -180,34 +180,34 @@ exports[`CheckboxGroup > renders with description correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with description slot correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
-        <p class="text-muted">Description slot</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+        <p data-slot="description" class="text-muted">Description slot</p>
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
-        <p class="text-muted">Description slot</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+        <p data-slot="description" class="text-muted">Description slot</p>
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
-        <p class="text-muted">Description slot</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+        <p data-slot="description" class="text-muted">Description slot</p>
       </div>
     </div>
   </fieldset>
@@ -216,34 +216,34 @@ exports[`CheckboxGroup > renders with description slot correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with descriptionKey correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
-        <p class="text-muted">1</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+        <p data-slot="description" class="text-muted">1</p>
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
-        <p class="text-muted">2</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+        <p data-slot="description" class="text-muted">2</p>
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
-        <p class="text-muted">3</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+        <p data-slot="description" class="text-muted">3</p>
       </div>
     </div>
   </fieldset>
@@ -252,33 +252,33 @@ exports[`CheckboxGroup > renders with descriptionKey correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with disabled correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="-1" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="-1" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default cursor-not-allowed opacity-75">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default cursor-not-allowed opacity-75">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default cursor-not-allowed opacity-75">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default cursor-not-allowed opacity-75">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default cursor-not-allowed opacity-75">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default cursor-not-allowed opacity-75">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -288,32 +288,32 @@ exports[`CheckboxGroup > renders with disabled correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with horizontal variant card correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-row gap-y-1">
-    <!--v-if--><label class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-full"></svg></span>
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-row gap-y-1">
+    <!--v-if--><label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+    </label><label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+    </label><label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
     </label>
@@ -323,32 +323,32 @@ exports[`CheckboxGroup > renders with horizontal variant card correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with horizontal variant list correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-row gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-row gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-full"></svg></span>
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -358,32 +358,32 @@ exports[`CheckboxGroup > renders with horizontal variant list correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex flex-row gap-0 -space-x-px">
-    <!--v-if--><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-full"></svg></span>
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex flex-row gap-0 -space-x-px">
+    <!--v-if--><label data-slot="root" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+    </label><label data-slot="root" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+    </label><label data-slot="root" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
     </label>
@@ -393,32 +393,32 @@ exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with indicator end correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row-reverse">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-full"></svg></span>
+    <div data-slot="root" class="relative flex items-start flex-row-reverse">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full me-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full me-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row-reverse">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row-reverse">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full me-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full me-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row-reverse">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row-reverse">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full me-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full me-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -428,32 +428,32 @@ exports[`CheckboxGroup > renders with indicator end correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with indicator hidden correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-full"></svg></span>
+    <div data-slot="root" class="relative flex items-start">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full text-center text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full text-center text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full text-center text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full text-center text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full text-center text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full text-center text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -463,32 +463,32 @@ exports[`CheckboxGroup > renders with indicator hidden correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with indicator start correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-full"></svg></span>
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -498,33 +498,33 @@ exports[`CheckboxGroup > renders with indicator start correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with items correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -534,33 +534,33 @@ exports[`CheckboxGroup > renders with items correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with label slot correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
     </div>
@@ -570,33 +570,33 @@ exports[`CheckboxGroup > renders with label slot correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with labelKey correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">3</label>
         <!--v-if-->
       </div>
     </div>
@@ -606,33 +606,33 @@ exports[`CheckboxGroup > renders with labelKey correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with legend slot correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <legend class="mb-1 block font-medium text-default text-sm">Legend slot</legend>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
+    <legend data-slot="legend" class="mb-1 block font-medium text-default text-sm">Legend slot</legend>
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -642,32 +642,32 @@ exports[`CheckboxGroup > renders with legend slot correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with modelValue correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-full"></svg></span>
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -677,32 +677,32 @@ exports[`CheckboxGroup > renders with modelValue correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with neutral variant card correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-full"></svg></span>
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
+    <!--v-if--><label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
     </label>
@@ -712,32 +712,32 @@ exports[`CheckboxGroup > renders with neutral variant card correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with neutral variant list correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-full"></svg></span>
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -747,32 +747,32 @@ exports[`CheckboxGroup > renders with neutral variant list correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with neutral variant table correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex flex-col gap-0 -space-y-px">
-    <!--v-if--><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-full"></svg></span>
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex flex-col gap-0 -space-y-px">
+    <!--v-if--><label data-slot="root" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="root" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="root" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
     </label>
@@ -782,32 +782,32 @@ exports[`CheckboxGroup > renders with neutral variant table correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with primary variant card correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-full"></svg></span>
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
+    <!--v-if--><label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
     </label>
@@ -817,32 +817,32 @@ exports[`CheckboxGroup > renders with primary variant card correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with primary variant list correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-full"></svg></span>
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -852,32 +852,32 @@ exports[`CheckboxGroup > renders with primary variant list correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with primary variant table correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex flex-col gap-0 -space-y-px">
-    <!--v-if--><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-full"></svg></span>
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex flex-col gap-0 -space-y-px">
+    <!--v-if--><label data-slot="root" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="root" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="root" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
     </label>
@@ -887,33 +887,33 @@ exports[`CheckboxGroup > renders with primary variant table correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with required correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <legend class="mb-1 block font-medium text-default text-sm after:content-['*'] after:ms-0.5 after:text-error">Legend</legend>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
+    <legend data-slot="legend" class="mb-1 block font-medium text-default text-sm after:content-['*'] after:ms-0.5 after:text-error">Legend</legend>
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -923,32 +923,32 @@ exports[`CheckboxGroup > renders with required correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with size lg correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-full"></svg></span>
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -958,32 +958,32 @@ exports[`CheckboxGroup > renders with size lg correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with size md correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-full"></svg></span>
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -993,32 +993,32 @@ exports[`CheckboxGroup > renders with size md correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with size sm correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-0.5">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-0.5">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-full"></svg></span>
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-xs"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-xs"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-xs"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1028,32 +1028,32 @@ exports[`CheckboxGroup > renders with size sm correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with size xl correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1.5">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1.5">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-6"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-full"></svg></span>
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-base"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-base"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-6"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-base"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-base"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-6"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-base"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-base"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1063,32 +1063,32 @@ exports[`CheckboxGroup > renders with size xl correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with size xs correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-0.5">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-0.5">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-full"></svg></span>
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-xs"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-xs"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-xs"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1098,33 +1098,33 @@ exports[`CheckboxGroup > renders with size xs correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with ui correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex flex-col gap-y-1 gap-x-4">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex flex-col gap-y-1 gap-x-4">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-red">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-red">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-red">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-red">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-red">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-red">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1134,33 +1134,33 @@ exports[`CheckboxGroup > renders with ui correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with valueKey correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:Option 1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:Option 1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:Option 1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:Option 1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:Option 2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:Option 2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:Option 2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:Option 2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:Option 3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:Option 3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0:Option 3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:Option 3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
diff --git a/test/components/__snapshots__/CheckboxGroup.spec.ts.snap b/test/components/__snapshots__/CheckboxGroup.spec.ts.snap
index ef17ad1dad..c293e22888 100644
--- a/test/components/__snapshots__/CheckboxGroup.spec.ts.snap
+++ b/test/components/__snapshots__/CheckboxGroup.spec.ts.snap
@@ -1,33 +1,33 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CheckboxGroup > renders with ariaLabel correctly 1`] = `
-"<div id="v-0-0" class="relative" aria-label="Aria label" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" aria-label="Aria label" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -37,33 +37,33 @@ exports[`CheckboxGroup > renders with ariaLabel correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with as correctly 1`] = `
-"<section id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<section id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -73,33 +73,33 @@ exports[`CheckboxGroup > renders with as correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with class correctly 1`] = `
-"<div id="v-0-0" class="absolute" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="absolute" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -109,32 +109,32 @@ exports[`CheckboxGroup > renders with class correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with defaultValue correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -144,34 +144,34 @@ exports[`CheckboxGroup > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with description correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
-        <p class="text-muted">Description 0</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+        <p data-slot="description" class="text-muted">Description 0</p>
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
-        <p class="text-muted">Description 1</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+        <p data-slot="description" class="text-muted">Description 1</p>
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
-        <p class="text-muted">Description 2</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+        <p data-slot="description" class="text-muted">Description 2</p>
       </div>
     </div>
   </fieldset>
@@ -180,34 +180,34 @@ exports[`CheckboxGroup > renders with description correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with description slot correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
-        <p class="text-muted">Description slot</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+        <p data-slot="description" class="text-muted">Description slot</p>
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
-        <p class="text-muted">Description slot</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+        <p data-slot="description" class="text-muted">Description slot</p>
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
-        <p class="text-muted">Description slot</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+        <p data-slot="description" class="text-muted">Description slot</p>
       </div>
     </div>
   </fieldset>
@@ -216,34 +216,34 @@ exports[`CheckboxGroup > renders with description slot correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with descriptionKey correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
-        <p class="text-muted">1</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+        <p data-slot="description" class="text-muted">1</p>
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
-        <p class="text-muted">2</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+        <p data-slot="description" class="text-muted">2</p>
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
-        <p class="text-muted">3</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+        <p data-slot="description" class="text-muted">3</p>
       </div>
     </div>
   </fieldset>
@@ -252,33 +252,33 @@ exports[`CheckboxGroup > renders with descriptionKey correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with disabled correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="-1" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="-1" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default cursor-not-allowed opacity-75">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default cursor-not-allowed opacity-75">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default cursor-not-allowed opacity-75">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default cursor-not-allowed opacity-75">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default cursor-not-allowed opacity-75">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default cursor-not-allowed opacity-75">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -288,32 +288,32 @@ exports[`CheckboxGroup > renders with disabled correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with horizontal variant card correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-row gap-y-1">
-    <!--v-if--><label class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-row gap-y-1">
+    <!--v-if--><label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+    </label><label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+    </label><label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
     </label>
@@ -323,32 +323,32 @@ exports[`CheckboxGroup > renders with horizontal variant card correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with horizontal variant list correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-row gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-row gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -358,32 +358,32 @@ exports[`CheckboxGroup > renders with horizontal variant list correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex flex-row gap-0 -space-x-px">
-    <!--v-if--><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex flex-row gap-0 -space-x-px">
+    <!--v-if--><label data-slot="root" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+    </label><label data-slot="root" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+    </label><label data-slot="root" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
     </label>
@@ -393,32 +393,32 @@ exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with indicator end correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row-reverse">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
+    <div data-slot="root" class="relative flex items-start flex-row-reverse">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full me-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full me-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row-reverse">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row-reverse">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full me-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full me-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row-reverse">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row-reverse">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full me-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full me-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -428,32 +428,32 @@ exports[`CheckboxGroup > renders with indicator end correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with indicator hidden correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
+    <div data-slot="root" class="relative flex items-start">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full text-center text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full text-center text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full text-center text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full text-center text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full text-center text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full text-center text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -463,32 +463,32 @@ exports[`CheckboxGroup > renders with indicator hidden correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with indicator start correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -498,33 +498,33 @@ exports[`CheckboxGroup > renders with indicator start correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with items correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -534,33 +534,33 @@ exports[`CheckboxGroup > renders with items correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with label slot correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
     </div>
@@ -570,33 +570,33 @@ exports[`CheckboxGroup > renders with label slot correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with labelKey correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">3</label>
         <!--v-if-->
       </div>
     </div>
@@ -606,33 +606,33 @@ exports[`CheckboxGroup > renders with labelKey correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with legend slot correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <legend class="mb-1 block font-medium text-default text-sm">Legend slot</legend>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
+    <legend data-slot="legend" class="mb-1 block font-medium text-default text-sm">Legend slot</legend>
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -642,32 +642,32 @@ exports[`CheckboxGroup > renders with legend slot correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with modelValue correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -677,32 +677,32 @@ exports[`CheckboxGroup > renders with modelValue correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with neutral variant card correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
+    <!--v-if--><label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
     </label>
@@ -712,32 +712,32 @@ exports[`CheckboxGroup > renders with neutral variant card correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with neutral variant list correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -747,32 +747,32 @@ exports[`CheckboxGroup > renders with neutral variant list correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with neutral variant table correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex flex-col gap-0 -space-y-px">
-    <!--v-if--><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex flex-col gap-0 -space-y-px">
+    <!--v-if--><label data-slot="root" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="root" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="root" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
     </label>
@@ -782,32 +782,32 @@ exports[`CheckboxGroup > renders with neutral variant table correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with primary variant card correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
+    <!--v-if--><label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
     </label>
@@ -817,32 +817,32 @@ exports[`CheckboxGroup > renders with primary variant card correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with primary variant list correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -852,32 +852,32 @@ exports[`CheckboxGroup > renders with primary variant list correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with primary variant table correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex flex-col gap-0 -space-y-px">
-    <!--v-if--><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex flex-col gap-0 -space-y-px">
+    <!--v-if--><label data-slot="root" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="root" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="root" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
     </label>
@@ -887,33 +887,33 @@ exports[`CheckboxGroup > renders with primary variant table correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with required correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <legend class="mb-1 block font-medium text-default text-sm after:content-['*'] after:ms-0.5 after:text-error">Legend</legend>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
+    <legend data-slot="legend" class="mb-1 block font-medium text-default text-sm after:content-['*'] after:ms-0.5 after:text-error">Legend</legend>
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -923,32 +923,32 @@ exports[`CheckboxGroup > renders with required correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with size lg correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -958,32 +958,32 @@ exports[`CheckboxGroup > renders with size lg correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with size md correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -993,32 +993,32 @@ exports[`CheckboxGroup > renders with size md correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with size sm correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-0.5">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-0.5">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-xs"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-xs"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-xs"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1028,32 +1028,32 @@ exports[`CheckboxGroup > renders with size sm correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with size xl correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1.5">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1.5">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-6"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-base"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-base"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-6"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-base"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-base"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-6"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-base"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-base"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1063,32 +1063,32 @@ exports[`CheckboxGroup > renders with size xl correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with size xs correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-0.5">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-0.5">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-xs"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-xs"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-xs"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1098,33 +1098,33 @@ exports[`CheckboxGroup > renders with size xs correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with ui correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex flex-col gap-y-1 gap-x-4">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex flex-col gap-y-1 gap-x-4">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-red">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-red">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-red">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-red">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-red">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-red">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1134,33 +1134,33 @@ exports[`CheckboxGroup > renders with ui correctly 1`] = `
 `;
 
 exports[`CheckboxGroup > renders with valueKey correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:Option 1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:Option 1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:Option 1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:Option 1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:Option 2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:Option 2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:Option 2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:Option 2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="relative flex items-start flex-row">
-      <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:Option 3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    <div data-slot="root" class="relative flex items-start flex-row">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:Option 3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2 text-sm"><label for="v-0-0:Option 3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:Option 3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
diff --git a/test/components/__snapshots__/Chip-vue.spec.ts.snap b/test/components/__snapshots__/Chip-vue.spec.ts.snap
index 4b3939117d..e38d4b2c3b 100644
--- a/test/components/__snapshots__/Chip-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Chip-vue.spec.ts.snap
@@ -1,49 +1,49 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Chip > renders with as correctly 1`] = `"<span class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></span>"`;
+exports[`Chip > renders with as correctly 1`] = `"<span data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></span>"`;
 
-exports[`Chip > renders with class correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0 mx-auto"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with class correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 mx-auto"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with color neutral correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-inverted h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with color neutral correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-inverted h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with content slot correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform">Content slot</span></div>"`;
+exports[`Chip > renders with content slot correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform">Content slot</span></div>"`;
 
-exports[`Chip > renders with default slot correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0">Default slot<span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with default slot correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0">Default slot<span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with inset correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute"></span></div>"`;
+exports[`Chip > renders with inset correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute"></span></div>"`;
 
-exports[`Chip > renders with position bottom-left correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] bottom-0 left-0 absolute translate-y-1/2 -translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with position bottom-left correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] bottom-0 left-0 absolute translate-y-1/2 -translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with position bottom-right correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] bottom-0 right-0 absolute translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with position bottom-right correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] bottom-0 right-0 absolute translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with position top-left correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 left-0 absolute -translate-y-1/2 -translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with position top-left correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 left-0 absolute -translate-y-1/2 -translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with position top-right correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with position top-right correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size 2xl correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[11px] min-w-[11px] text-[11px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size 2xl correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[11px] min-w-[11px] text-[11px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size 2xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[5px] min-w-[5px] text-[5px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size 2xs correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[5px] min-w-[5px] text-[5px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size 3xl correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[12px] min-w-[12px] text-[12px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size 3xl correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[12px] min-w-[12px] text-[12px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size 3xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[4px] min-w-[4px] text-[4px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size 3xs correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[4px] min-w-[4px] text-[4px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size lg correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[9px] min-w-[9px] text-[9px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size lg correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[9px] min-w-[9px] text-[9px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size md correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size md correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size sm correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[7px] min-w-[7px] text-[7px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size sm correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[7px] min-w-[7px] text-[7px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size xl correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[10px] min-w-[10px] text-[10px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size xl correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[10px] min-w-[10px] text-[10px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[6px] min-w-[6px] text-[6px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size xs correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[6px] min-w-[6px] text-[6px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with text correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform">Text</span></div>"`;
+exports[`Chip > renders with text correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform">Text</span></div>"`;
 
-exports[`Chip > renders with ui correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform text-muted"></span></div>"`;
+exports[`Chip > renders with ui correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform text-muted"></span></div>"`;
 
 exports[`Chip > renders without show correctly 1`] = `
-"<div class="relative inline-flex items-center justify-center shrink-0">
+"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0">
   <!--v-if-->
 </div>"
 `;
diff --git a/test/components/__snapshots__/Chip.spec.ts.snap b/test/components/__snapshots__/Chip.spec.ts.snap
index 4b3939117d..e38d4b2c3b 100644
--- a/test/components/__snapshots__/Chip.spec.ts.snap
+++ b/test/components/__snapshots__/Chip.spec.ts.snap
@@ -1,49 +1,49 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Chip > renders with as correctly 1`] = `"<span class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></span>"`;
+exports[`Chip > renders with as correctly 1`] = `"<span data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></span>"`;
 
-exports[`Chip > renders with class correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0 mx-auto"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with class correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 mx-auto"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with color neutral correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-inverted h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with color neutral correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-inverted h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with content slot correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform">Content slot</span></div>"`;
+exports[`Chip > renders with content slot correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform">Content slot</span></div>"`;
 
-exports[`Chip > renders with default slot correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0">Default slot<span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with default slot correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0">Default slot<span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with inset correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute"></span></div>"`;
+exports[`Chip > renders with inset correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute"></span></div>"`;
 
-exports[`Chip > renders with position bottom-left correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] bottom-0 left-0 absolute translate-y-1/2 -translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with position bottom-left correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] bottom-0 left-0 absolute translate-y-1/2 -translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with position bottom-right correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] bottom-0 right-0 absolute translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with position bottom-right correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] bottom-0 right-0 absolute translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with position top-left correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 left-0 absolute -translate-y-1/2 -translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with position top-left correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 left-0 absolute -translate-y-1/2 -translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with position top-right correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with position top-right correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size 2xl correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[11px] min-w-[11px] text-[11px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size 2xl correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[11px] min-w-[11px] text-[11px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size 2xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[5px] min-w-[5px] text-[5px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size 2xs correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[5px] min-w-[5px] text-[5px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size 3xl correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[12px] min-w-[12px] text-[12px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size 3xl correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[12px] min-w-[12px] text-[12px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size 3xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[4px] min-w-[4px] text-[4px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size 3xs correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[4px] min-w-[4px] text-[4px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size lg correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[9px] min-w-[9px] text-[9px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size lg correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[9px] min-w-[9px] text-[9px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size md correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size md correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size sm correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[7px] min-w-[7px] text-[7px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size sm correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[7px] min-w-[7px] text-[7px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size xl correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[10px] min-w-[10px] text-[10px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size xl correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[10px] min-w-[10px] text-[10px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[6px] min-w-[6px] text-[6px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size xs correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[6px] min-w-[6px] text-[6px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with text correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform">Text</span></div>"`;
+exports[`Chip > renders with text correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform">Text</span></div>"`;
 
-exports[`Chip > renders with ui correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-bg flex items-center justify-center font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform text-muted"></span></div>"`;
+exports[`Chip > renders with ui correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform text-muted"></span></div>"`;
 
 exports[`Chip > renders without show correctly 1`] = `
-"<div class="relative inline-flex items-center justify-center shrink-0">
+"<div data-slot="root" class="relative inline-flex items-center justify-center shrink-0">
   <!--v-if-->
 </div>"
 `;
diff --git a/test/components/__snapshots__/Collapsible-vue.spec.ts.snap b/test/components/__snapshots__/Collapsible-vue.spec.ts.snap
index da7b47670c..e4a94d7564 100644
--- a/test/components/__snapshots__/Collapsible-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Collapsible-vue.spec.ts.snap
@@ -1,55 +1,55 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Collapsible > renders with as correctly 1`] = `
-"<section data-state="open">
+"<section data-state="open" data-slot="root">
   <!--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" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
+  <div data-slot="content" 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" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
 </section>"
 `;
 
 exports[`Collapsible > renders with class correctly 1`] = `
-"<div data-state="open" class="flex flex-col gap-2 w-48">
+"<div data-state="open" data-slot="root" class="flex flex-col gap-2 w-48">
   <!--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" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
+  <div data-slot="content" 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" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
 </div>"
 `;
 
 exports[`Collapsible > renders with content slot correctly 1`] = `
-"<div data-state="open">
+"<div data-state="open" data-slot="root">
   <!--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" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;">Content slot</div>
+  <div data-slot="content" 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" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;">Content slot</div>
 </div>"
 `;
 
 exports[`Collapsible > renders with default slot correctly 1`] = `
-"<div data-state="open">Default slot<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" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
+"<div data-state="open" data-slot="root">Default slot<div data-slot="content" 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" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
 </div>"
 `;
 
 exports[`Collapsible > renders with disabled correctly 1`] = `
-"<div data-state="open" data-disabled="">
+"<div data-state="open" data-disabled="" data-slot="root">
   <!--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" data-disabled="" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
+  <div data-slot="content" 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" data-disabled="" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
 </div>"
 `;
 
 exports[`Collapsible > renders with open correctly 1`] = `
-"<div data-state="open">
+"<div data-state="open" data-slot="root">
   <!--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" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
+  <div data-slot="content" 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" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
 </div>"
 `;
 
 exports[`Collapsible > renders with ui correctly 1`] = `
-"<div data-state="open">
+"<div data-state="open" data-slot="root">
   <!--v-if-->
-  <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden bg-elevated" id="reka-collapsible-content-v-0" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
+  <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden bg-elevated" id="reka-collapsible-content-v-0" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
 </div>"
 `;
 
 exports[`Collapsible > renders with unmountOnHide correctly 1`] = `
-"<div data-state="open">
+"<div data-state="open" data-slot="root">
   <!--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" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
+  <div data-slot="content" 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" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
 </div>"
 `;
diff --git a/test/components/__snapshots__/Collapsible.spec.ts.snap b/test/components/__snapshots__/Collapsible.spec.ts.snap
index 60f0893b4c..e03c95deba 100644
--- a/test/components/__snapshots__/Collapsible.spec.ts.snap
+++ b/test/components/__snapshots__/Collapsible.spec.ts.snap
@@ -1,55 +1,55 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Collapsible > renders with as correctly 1`] = `
-"<section data-state="open">
+"<section data-state="open" data-slot="root">
   <!--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-0" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
+  <div data-slot="content" 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-0" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
 </section>"
 `;
 
 exports[`Collapsible > renders with class correctly 1`] = `
-"<div data-state="open" class="flex flex-col gap-2 w-48">
+"<div data-state="open" data-slot="root" class="flex flex-col gap-2 w-48">
   <!--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-0" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
+  <div data-slot="content" 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-0" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
 </div>"
 `;
 
 exports[`Collapsible > renders with content slot correctly 1`] = `
-"<div data-state="open">
+"<div data-state="open" data-slot="root">
   <!--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-0" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;">Content slot</div>
+  <div data-slot="content" 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-0" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;">Content slot</div>
 </div>"
 `;
 
 exports[`Collapsible > renders with default slot correctly 1`] = `
-"<div data-state="open">Default slot<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-0" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
+"<div data-state="open" data-slot="root">Default slot<div data-slot="content" 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-0" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
 </div>"
 `;
 
 exports[`Collapsible > renders with disabled correctly 1`] = `
-"<div data-state="open" data-disabled="">
+"<div data-state="open" data-disabled="" data-slot="root">
   <!--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-0" data-disabled="" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
+  <div data-slot="content" 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-0" data-disabled="" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
 </div>"
 `;
 
 exports[`Collapsible > renders with open correctly 1`] = `
-"<div data-state="open">
+"<div data-state="open" data-slot="root">
   <!--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-0" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
+  <div data-slot="content" 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-0" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
 </div>"
 `;
 
 exports[`Collapsible > renders with ui correctly 1`] = `
-"<div data-state="open">
+"<div data-state="open" data-slot="root">
   <!--v-if-->
-  <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden bg-elevated" id="reka-collapsible-content-v-0-0-0" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
+  <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden bg-elevated" id="reka-collapsible-content-v-0-0-0" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
 </div>"
 `;
 
 exports[`Collapsible > renders with unmountOnHide correctly 1`] = `
-"<div data-state="open">
+"<div data-state="open" data-slot="root">
   <!--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-0" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
+  <div data-slot="content" 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-0" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
 </div>"
 `;
diff --git a/test/components/__snapshots__/ColorPicker-vue.spec.ts.snap b/test/components/__snapshots__/ColorPicker-vue.spec.ts.snap
index 7e786ff30d..9918893100 100644
--- a/test/components/__snapshots__/ColorPicker-vue.spec.ts.snap
+++ b/test/components/__snapshots__/ColorPicker-vue.spec.ts.snap
@@ -1,210 +1,210 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ColorPicker > renders with as correctly 1`] = `
-"<section data-v-c9a043d6="" class="data-[disabled]:opacity-75">
-  <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
-      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+"<section data-v-c9a043d6="" data-slot="root" class="data-[disabled]:opacity-75">
+  <div data-v-c9a043d6="" data-slot="picker" class="flex gap-4">
+    <div data-v-c9a043d6="" data-slot="selector" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
+      <div data-v-c9a043d6="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-c9a043d6="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+    <div data-v-c9a043d6="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
+      <div data-v-c9a043d6="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </section>"
 `;
 
 exports[`ColorPicker > renders with class correctly 1`] = `
-"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75 w-96">
-  <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
-      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+"<div data-v-c9a043d6="" data-slot="root" class="data-[disabled]:opacity-75 w-96">
+  <div data-v-c9a043d6="" data-slot="picker" class="flex gap-4">
+    <div data-v-c9a043d6="" data-slot="selector" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
+      <div data-v-c9a043d6="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-c9a043d6="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+    <div data-v-c9a043d6="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
+      <div data-v-c9a043d6="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`ColorPicker > renders with disabled correctly 1`] = `
-"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75" data-disabled="true">
-  <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
-      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-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="" data-slot="root" class="data-[disabled]:opacity-75" data-disabled="true">
+  <div data-v-c9a043d6="" data-slot="picker" class="flex gap-4">
+    <div data-v-c9a043d6="" data-slot="selector" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
+      <div data-v-c9a043d6="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-c9a043d6="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;" data-disabled="true"></div>
       </div>
     </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;" data-disabled="true"></div>
+    <div data-v-c9a043d6="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
+      <div data-v-c9a043d6="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;" data-disabled="true"></div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`ColorPicker > renders with format cmyk correctly 1`] = `
-"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
-  <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
-      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.310000000000002%;"></div>
+"<div data-v-c9a043d6="" data-slot="root" class="data-[disabled]:opacity-75">
+  <div data-v-c9a043d6="" data-slot="picker" class="flex gap-4">
+    <div data-v-c9a043d6="" data-slot="selector" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
+      <div data-v-c9a043d6="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-c9a043d6="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.310000000000002%;"></div>
       </div>
     </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48666666666667%;"></div>
+    <div data-v-c9a043d6="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
+      <div data-v-c9a043d6="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48666666666667%;"></div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`ColorPicker > renders with format hex correctly 1`] = `
-"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
-  <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
-      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
+"<div data-v-c9a043d6="" data-slot="root" class="data-[disabled]:opacity-75">
+  <div data-v-c9a043d6="" data-slot="picker" class="flex gap-4">
+    <div data-v-c9a043d6="" data-slot="selector" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
+      <div data-v-c9a043d6="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-c9a043d6="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
       </div>
     </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
+    <div data-v-c9a043d6="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
+      <div data-v-c9a043d6="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`ColorPicker > renders with format hsl correctly 1`] = `
-"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
-  <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
-      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.400000000000006%;"></div>
+"<div data-v-c9a043d6="" data-slot="root" class="data-[disabled]:opacity-75">
+  <div data-v-c9a043d6="" data-slot="picker" class="flex gap-4">
+    <div data-v-c9a043d6="" data-slot="selector" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
+      <div data-v-c9a043d6="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-c9a043d6="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.400000000000006%;"></div>
       </div>
     </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.5%;"></div>
+    <div data-v-c9a043d6="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
+      <div data-v-c9a043d6="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.5%;"></div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`ColorPicker > renders with format lab correctly 1`] = `
-"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
-  <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF6F;">
-      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C757; left: 100%; top: 22.031043999999994%;"></div>
+"<div data-v-c9a043d6="" data-slot="root" class="data-[disabled]:opacity-75">
+  <div data-v-c9a043d6="" data-slot="picker" class="flex gap-4">
+    <div data-v-c9a043d6="" data-slot="selector" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF6F;">
+      <div data-v-c9a043d6="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-c9a043d6="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C757; left: 100%; top: 22.031043999999994%;"></div>
       </div>
     </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF6F; top: 40.609066111111105%;"></div>
+    <div data-v-c9a043d6="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
+      <div data-v-c9a043d6="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF6F; top: 40.609066111111105%;"></div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`ColorPicker > renders with format rgb correctly 1`] = `
-"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
-  <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
-      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
+"<div data-v-c9a043d6="" data-slot="root" class="data-[disabled]:opacity-75">
+  <div data-v-c9a043d6="" data-slot="picker" class="flex gap-4">
+    <div data-v-c9a043d6="" data-slot="selector" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
+      <div data-v-c9a043d6="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-c9a043d6="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
       </div>
     </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
+    <div data-v-c9a043d6="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
+      <div data-v-c9a043d6="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`ColorPicker > renders with size lg correctly 1`] = `
-"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
-  <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md touch-none w-44 h-44" style="background-color: #FF0000;">
-      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+"<div data-v-c9a043d6="" data-slot="root" class="data-[disabled]:opacity-75">
+  <div data-v-c9a043d6="" data-slot="picker" class="flex gap-4">
+    <div data-v-c9a043d6="" data-slot="selector" class="rounded-md touch-none w-44 h-44" style="background-color: #FF0000;">
+      <div data-v-c9a043d6="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-c9a043d6="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+    <div data-v-c9a043d6="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-44" data-color-picker-track="">
+      <div data-v-c9a043d6="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`ColorPicker > renders with size md correctly 1`] = `
-"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
-  <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
-      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+"<div data-v-c9a043d6="" data-slot="root" class="data-[disabled]:opacity-75">
+  <div data-v-c9a043d6="" data-slot="picker" class="flex gap-4">
+    <div data-v-c9a043d6="" data-slot="selector" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
+      <div data-v-c9a043d6="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-c9a043d6="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+    <div data-v-c9a043d6="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
+      <div data-v-c9a043d6="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`ColorPicker > renders with size sm correctly 1`] = `
-"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
-  <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md touch-none w-40 h-40" style="background-color: #FF0000;">
-      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+"<div data-v-c9a043d6="" data-slot="root" class="data-[disabled]:opacity-75">
+  <div data-v-c9a043d6="" data-slot="picker" class="flex gap-4">
+    <div data-v-c9a043d6="" data-slot="selector" class="rounded-md touch-none w-40 h-40" style="background-color: #FF0000;">
+      <div data-v-c9a043d6="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-c9a043d6="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+    <div data-v-c9a043d6="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-40" data-color-picker-track="">
+      <div data-v-c9a043d6="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`ColorPicker > renders with size xl correctly 1`] = `
-"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
-  <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md touch-none w-46 h-46" style="background-color: #FF0000;">
-      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+"<div data-v-c9a043d6="" data-slot="root" class="data-[disabled]:opacity-75">
+  <div data-v-c9a043d6="" data-slot="picker" class="flex gap-4">
+    <div data-v-c9a043d6="" data-slot="selector" class="rounded-md touch-none w-46 h-46" style="background-color: #FF0000;">
+      <div data-v-c9a043d6="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-c9a043d6="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+    <div data-v-c9a043d6="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-46" data-color-picker-track="">
+      <div data-v-c9a043d6="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`ColorPicker > renders with size xs correctly 1`] = `
-"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
-  <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md touch-none w-38 h-38" style="background-color: #FF0000;">
-      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+"<div data-v-c9a043d6="" data-slot="root" class="data-[disabled]:opacity-75">
+  <div data-v-c9a043d6="" data-slot="picker" class="flex gap-4">
+    <div data-v-c9a043d6="" data-slot="selector" class="rounded-md touch-none w-38 h-38" style="background-color: #FF0000;">
+      <div data-v-c9a043d6="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-c9a043d6="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+    <div data-v-c9a043d6="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-38" data-color-picker-track="">
+      <div data-v-c9a043d6="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`ColorPicker > renders with ui correctly 1`] = `
-"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
-  <div data-v-c9a043d6="" class="flex gap-8">
-    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
-      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+"<div data-v-c9a043d6="" data-slot="root" class="data-[disabled]:opacity-75">
+  <div data-v-c9a043d6="" data-slot="picker" class="flex gap-8">
+    <div data-v-c9a043d6="" data-slot="selector" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
+      <div data-v-c9a043d6="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-c9a043d6="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+    <div data-v-c9a043d6="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
+      <div data-v-c9a043d6="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
diff --git a/test/components/__snapshots__/ColorPicker.spec.ts.snap b/test/components/__snapshots__/ColorPicker.spec.ts.snap
index a613946e64..e54890dee3 100644
--- a/test/components/__snapshots__/ColorPicker.spec.ts.snap
+++ b/test/components/__snapshots__/ColorPicker.spec.ts.snap
@@ -1,210 +1,210 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ColorPicker > renders with as correctly 1`] = `
-"<section data-v-d6f23756="" class="data-[disabled]:opacity-75">
-  <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
-      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+"<section data-v-d6f23756="" data-slot="root" class="data-[disabled]:opacity-75">
+  <div data-v-d6f23756="" data-slot="picker" class="flex gap-4">
+    <div data-v-d6f23756="" data-slot="selector" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
+      <div data-v-d6f23756="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-d6f23756="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+    <div data-v-d6f23756="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
+      <div data-v-d6f23756="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </section>"
 `;
 
 exports[`ColorPicker > renders with class correctly 1`] = `
-"<div data-v-d6f23756="" class="data-[disabled]:opacity-75 w-96">
-  <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
-      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+"<div data-v-d6f23756="" data-slot="root" class="data-[disabled]:opacity-75 w-96">
+  <div data-v-d6f23756="" data-slot="picker" class="flex gap-4">
+    <div data-v-d6f23756="" data-slot="selector" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
+      <div data-v-d6f23756="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-d6f23756="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+    <div data-v-d6f23756="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
+      <div data-v-d6f23756="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`ColorPicker > renders with disabled correctly 1`] = `
-"<div data-v-d6f23756="" class="data-[disabled]:opacity-75" data-disabled="true">
-  <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
-      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-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="" data-slot="root" class="data-[disabled]:opacity-75" data-disabled="true">
+  <div data-v-d6f23756="" data-slot="picker" class="flex gap-4">
+    <div data-v-d6f23756="" data-slot="selector" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
+      <div data-v-d6f23756="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-d6f23756="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;" data-disabled="true"></div>
       </div>
     </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;" data-disabled="true"></div>
+    <div data-v-d6f23756="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
+      <div data-v-d6f23756="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;" data-disabled="true"></div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`ColorPicker > renders with format cmyk correctly 1`] = `
-"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
-  <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
-      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.310000000000002%;"></div>
+"<div data-v-d6f23756="" data-slot="root" class="data-[disabled]:opacity-75">
+  <div data-v-d6f23756="" data-slot="picker" class="flex gap-4">
+    <div data-v-d6f23756="" data-slot="selector" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
+      <div data-v-d6f23756="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-d6f23756="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.310000000000002%;"></div>
       </div>
     </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48666666666667%;"></div>
+    <div data-v-d6f23756="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
+      <div data-v-d6f23756="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48666666666667%;"></div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`ColorPicker > renders with format hex correctly 1`] = `
-"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
-  <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
-      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
+"<div data-v-d6f23756="" data-slot="root" class="data-[disabled]:opacity-75">
+  <div data-v-d6f23756="" data-slot="picker" class="flex gap-4">
+    <div data-v-d6f23756="" data-slot="selector" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
+      <div data-v-d6f23756="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-d6f23756="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
       </div>
     </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
+    <div data-v-d6f23756="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
+      <div data-v-d6f23756="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`ColorPicker > renders with format hsl correctly 1`] = `
-"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
-  <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
-      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.400000000000006%;"></div>
+"<div data-v-d6f23756="" data-slot="root" class="data-[disabled]:opacity-75">
+  <div data-v-d6f23756="" data-slot="picker" class="flex gap-4">
+    <div data-v-d6f23756="" data-slot="selector" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
+      <div data-v-d6f23756="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-d6f23756="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.400000000000006%;"></div>
       </div>
     </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.5%;"></div>
+    <div data-v-d6f23756="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
+      <div data-v-d6f23756="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.5%;"></div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`ColorPicker > renders with format lab correctly 1`] = `
-"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
-  <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF6F;">
-      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C757; left: 100%; top: 22.031043999999994%;"></div>
+"<div data-v-d6f23756="" data-slot="root" class="data-[disabled]:opacity-75">
+  <div data-v-d6f23756="" data-slot="picker" class="flex gap-4">
+    <div data-v-d6f23756="" data-slot="selector" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF6F;">
+      <div data-v-d6f23756="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-d6f23756="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C757; left: 100%; top: 22.031043999999994%;"></div>
       </div>
     </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF6F; top: 40.609066111111105%;"></div>
+    <div data-v-d6f23756="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
+      <div data-v-d6f23756="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF6F; top: 40.609066111111105%;"></div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`ColorPicker > renders with format rgb correctly 1`] = `
-"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
-  <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
-      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
+"<div data-v-d6f23756="" data-slot="root" class="data-[disabled]:opacity-75">
+  <div data-v-d6f23756="" data-slot="picker" class="flex gap-4">
+    <div data-v-d6f23756="" data-slot="selector" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
+      <div data-v-d6f23756="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-d6f23756="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
       </div>
     </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
+    <div data-v-d6f23756="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
+      <div data-v-d6f23756="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`ColorPicker > renders with size lg correctly 1`] = `
-"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
-  <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md touch-none w-44 h-44" style="background-color: #FF0000;">
-      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+"<div data-v-d6f23756="" data-slot="root" class="data-[disabled]:opacity-75">
+  <div data-v-d6f23756="" data-slot="picker" class="flex gap-4">
+    <div data-v-d6f23756="" data-slot="selector" class="rounded-md touch-none w-44 h-44" style="background-color: #FF0000;">
+      <div data-v-d6f23756="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-d6f23756="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+    <div data-v-d6f23756="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-44" data-color-picker-track="">
+      <div data-v-d6f23756="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`ColorPicker > renders with size md correctly 1`] = `
-"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
-  <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
-      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+"<div data-v-d6f23756="" data-slot="root" class="data-[disabled]:opacity-75">
+  <div data-v-d6f23756="" data-slot="picker" class="flex gap-4">
+    <div data-v-d6f23756="" data-slot="selector" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
+      <div data-v-d6f23756="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-d6f23756="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+    <div data-v-d6f23756="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
+      <div data-v-d6f23756="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`ColorPicker > renders with size sm correctly 1`] = `
-"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
-  <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md touch-none w-40 h-40" style="background-color: #FF0000;">
-      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+"<div data-v-d6f23756="" data-slot="root" class="data-[disabled]:opacity-75">
+  <div data-v-d6f23756="" data-slot="picker" class="flex gap-4">
+    <div data-v-d6f23756="" data-slot="selector" class="rounded-md touch-none w-40 h-40" style="background-color: #FF0000;">
+      <div data-v-d6f23756="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-d6f23756="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+    <div data-v-d6f23756="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-40" data-color-picker-track="">
+      <div data-v-d6f23756="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`ColorPicker > renders with size xl correctly 1`] = `
-"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
-  <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md touch-none w-46 h-46" style="background-color: #FF0000;">
-      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+"<div data-v-d6f23756="" data-slot="root" class="data-[disabled]:opacity-75">
+  <div data-v-d6f23756="" data-slot="picker" class="flex gap-4">
+    <div data-v-d6f23756="" data-slot="selector" class="rounded-md touch-none w-46 h-46" style="background-color: #FF0000;">
+      <div data-v-d6f23756="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-d6f23756="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+    <div data-v-d6f23756="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-46" data-color-picker-track="">
+      <div data-v-d6f23756="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`ColorPicker > renders with size xs correctly 1`] = `
-"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
-  <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md touch-none w-38 h-38" style="background-color: #FF0000;">
-      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+"<div data-v-d6f23756="" data-slot="root" class="data-[disabled]:opacity-75">
+  <div data-v-d6f23756="" data-slot="picker" class="flex gap-4">
+    <div data-v-d6f23756="" data-slot="selector" class="rounded-md touch-none w-38 h-38" style="background-color: #FF0000;">
+      <div data-v-d6f23756="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-d6f23756="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+    <div data-v-d6f23756="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-38" data-color-picker-track="">
+      <div data-v-d6f23756="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`ColorPicker > renders with ui correctly 1`] = `
-"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
-  <div data-v-d6f23756="" class="flex gap-8">
-    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
-      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+"<div data-v-d6f23756="" data-slot="root" class="data-[disabled]:opacity-75">
+  <div data-v-d6f23756="" data-slot="picker" class="flex gap-8">
+    <div data-v-d6f23756="" data-slot="selector" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
+      <div data-v-d6f23756="" data-slot="selectorBackground" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-d6f23756="" data-slot="selectorThumb" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md 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-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+    <div data-v-d6f23756="" data-slot="track" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
+      <div data-v-d6f23756="" data-slot="trackThumb" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
diff --git a/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap b/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap
index 50a37f6133..0c9d042926 100644
--- a/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap
+++ b/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap
@@ -1,46 +1,46 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CommandPalette > renders with as correctly 1`] = `
-"<section dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<section dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -51,46 +51,46 @@ exports[`CommandPalette > renders with as correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with childrenIcon correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -101,46 +101,46 @@ exports[`CommandPalette > renders with childrenIcon correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with class correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-accented">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-accented">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -151,44 +151,44 @@ exports[`CommandPalette > renders with class correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with close correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -199,44 +199,44 @@ exports[`CommandPalette > renders with close correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with close slot correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5">Close slot</span></div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5">Close slot</span></div>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -247,44 +247,44 @@ exports[`CommandPalette > renders with close slot correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with closeIcon correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -295,43 +295,43 @@ exports[`CommandPalette > renders with closeIcon correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with custom slot correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Custom slot</button>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Custom slot</button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -342,46 +342,46 @@ exports[`CommandPalette > renders with custom slot correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with defaultValue correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -392,29 +392,29 @@ exports[`CommandPalette > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with descriptionKey correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create Project</span>
-          <!--v-if--></span><span class="truncate text-muted">Create Project</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create Project</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Create Project</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Open File</span>
-          <!--v-if--></span><span class="truncate text-muted">Open File</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">O</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Open File</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Open File</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">O</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Settings</span>
-          <!--v-if--></span><span class="truncate text-muted">Settings</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">,</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Settings</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Settings</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">,</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-4" class="p-1 isolate">
-        <div id="reka-listbox-group-v-4" class="p-1.5 text-xs font-semibold text-highlighted">Recent Files</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">index.vue</span>
-          <!--v-if--></span><span class="truncate text-muted">index.vue</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">app.vue</span>
-          <!--v-if--></span><span class="truncate text-muted">app.vue</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-4" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-4" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Recent Files</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">index.vue</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">index.vue</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">app.vue</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">app.vue</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
     </div>
@@ -425,46 +425,46 @@ exports[`CommandPalette > renders with descriptionKey correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with disabled correctly 1`] = `
-"<div dir="ltr" data-disabled="" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" disabled="" autocomplete="off" data-disabled="" aria-disabled="true" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div dir="ltr" data-disabled="" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" disabled="" autocomplete="off" data-disabled="" aria-disabled="true" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -475,46 +475,46 @@ exports[`CommandPalette > renders with disabled correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with empty slot correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -525,96 +525,96 @@ exports[`CommandPalette > renders with empty slot correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with footer slot correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
   </div>
-  <div class="p-1">Footer slot</div>
+  <div data-slot="footer" class="p-1">Footer slot</div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`CommandPalette > renders with groups correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -625,29 +625,29 @@ exports[`CommandPalette > renders with groups correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with groups with description correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create Project</span>
-          <!--v-if--></span><span class="truncate text-muted">Start a new project from scratch</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create Project</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Start a new project from scratch</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Open File</span>
-          <!--v-if--></span><span class="truncate text-muted">Browse and open an existing file</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">O</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Open File</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Browse and open an existing file</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">O</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Settings</span>
-          <!--v-if--></span><span class="truncate text-muted">Configure your preferences</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">,</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Settings</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Configure your preferences</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">,</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-4" class="p-1 isolate">
-        <div id="reka-listbox-group-v-4" class="p-1.5 text-xs font-semibold text-highlighted">Recent Files</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">index.vue</span>
-          <!--v-if--></span><span class="truncate text-muted">/src/pages/index.vue</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">app.vue</span>
-          <!--v-if--></span><span class="truncate text-muted">/app.vue</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-4" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-4" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Recent Files</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">index.vue</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">/src/pages/index.vue</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">app.vue</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">/app.vue</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
     </div>
@@ -658,46 +658,46 @@ exports[`CommandPalette > renders with groups with description correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with icon correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -708,23 +708,23 @@ exports[`CommandPalette > renders with icon correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with item slot correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated">Item slot</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item slot</button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item slot</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated">Item slot</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item slot</button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item slot</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item slot</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item slot</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item slot</button>
+      <div role="group" aria-labelledby="reka-listbox-group-v-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item slot</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item slot</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item slot</button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item slot</a>
+      <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item slot</a>
       </div>
     </div>
   </div>
@@ -734,29 +734,29 @@ exports[`CommandPalette > renders with item slot correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with item-description slot correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create Project</span>
-          <!--v-if--></span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create Project</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Open File</span>
-          <!--v-if--></span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">O</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Open File</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">O</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Settings</span>
-          <!--v-if--></span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">,</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Settings</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">,</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-4" class="p-1 isolate">
-        <div id="reka-listbox-group-v-4" class="p-1.5 text-xs font-semibold text-highlighted">Recent Files</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">index.vue</span>
-          <!--v-if--></span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">app.vue</span>
-          <!--v-if--></span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-4" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-4" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Recent Files</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">index.vue</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">app.vue</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
     </div>
@@ -767,42 +767,42 @@ exports[`CommandPalette > renders with item-description slot correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with item-label slot correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed">Item label slot</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed">Item label slot</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed">Item label slot</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed">Item label slot</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed">Item label slot</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed">Item label slot</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed">Item label slot</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed">Item label slot</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed">Item label slot</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed">Item label slot</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed">Item label slot</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed">Item label slot</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed">Item label slot</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed">Item label slot</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -813,43 +813,43 @@ exports[`CommandPalette > renders with item-label slot correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with item-leading slot correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -860,43 +860,43 @@ exports[`CommandPalette > renders with item-leading slot correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with item-trailing slot correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
         </a>
       </div>
     </div>
@@ -907,42 +907,42 @@ exports[`CommandPalette > renders with item-trailing slot correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with labelKey correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">i-lucide-file-plus</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">i-lucide-file-plus</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">i-lucide-folder-plus</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">i-lucide-folder-plus</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">i-lucide-hash</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">i-lucide-hash</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">i-lucide-tag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">i-lucide-tag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div>
-          <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div>
-          <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div>
-          <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-5" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div>
+          <!--v-if--><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div>
+          <!--v-if--><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div>
+          <!--v-if--><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <!--v-if--><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
-          <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
+        <!--v-if--><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+          <!--v-if--><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -953,46 +953,46 @@ exports[`CommandPalette > renders with labelKey correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with loading correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -1003,46 +1003,46 @@ exports[`CommandPalette > renders with loading correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with loadingIcon correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -1053,46 +1053,46 @@ exports[`CommandPalette > renders with loadingIcon correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with modelValue correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="true" data-state="checked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="true" data-state="checked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg></span>
         </a>
       </div>
     </div>
@@ -1103,46 +1103,46 @@ exports[`CommandPalette > renders with modelValue correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with placeholder correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Search..." class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Search..." data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -1153,26 +1153,26 @@ exports[`CommandPalette > renders with placeholder correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with searchTerm and preserveGroupOrder correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="f"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="f"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-3" class="p-1 isolate">
-        <div id="reka-listbox-group-v-3" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-3" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-3" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
     </div>
@@ -1183,25 +1183,25 @@ exports[`CommandPalette > renders with searchTerm and preserveGroupOrder correct
 `;
 
 exports[`CommandPalette > renders with searchTerm correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="f"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="f"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-2" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
@@ -1213,46 +1213,46 @@ exports[`CommandPalette > renders with searchTerm correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with selectedIcon correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="true" data-state="checked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="true" data-state="checked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg></span>
         </a>
       </div>
     </div>
@@ -1263,44 +1263,44 @@ exports[`CommandPalette > renders with selectedIcon correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with trailingIcon correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span></div>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -1311,46 +1311,46 @@ exports[`CommandPalette > renders with trailingIcon correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with ui correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-10"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-10"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -1361,12 +1361,12 @@ exports[`CommandPalette > renders with ui correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with virtualize correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none p-1 isolate">
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none p-1 isolate">
       <div data-reka-virtualizer="" style="position: relative; width: 100%; height: 256px;"></div>
     </div>
   </div>
@@ -1376,12 +1376,12 @@ exports[`CommandPalette > renders with virtualize correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders without groups correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div class="py-6 text-center text-sm text-muted">No data</div>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div data-slot="empty" class="py-6 text-center text-sm text-muted">No data</div>
   </div>
   <!--v-if-->
   <!--v-if-->
diff --git a/test/components/__snapshots__/CommandPalette.spec.ts.snap b/test/components/__snapshots__/CommandPalette.spec.ts.snap
index 7b5964278b..ea87caae59 100644
--- a/test/components/__snapshots__/CommandPalette.spec.ts.snap
+++ b/test/components/__snapshots__/CommandPalette.spec.ts.snap
@@ -1,46 +1,46 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CommandPalette > renders with as correctly 1`] = `
-"<section dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<section dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -51,46 +51,46 @@ exports[`CommandPalette > renders with as correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with childrenIcon correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -101,46 +101,46 @@ exports[`CommandPalette > renders with childrenIcon correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with class correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-accented">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-accented">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -151,47 +151,47 @@ exports[`CommandPalette > renders with class correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with close correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if--></button></span>
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -202,44 +202,44 @@ exports[`CommandPalette > renders with close correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with close slot correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5">Close slot</span></div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5">Close slot</span></div>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -250,47 +250,47 @@ exports[`CommandPalette > renders with close slot correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with closeIcon correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true"></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if--></button></span>
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -301,43 +301,43 @@ exports[`CommandPalette > renders with closeIcon correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with custom slot correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Custom slot</button>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Custom slot</button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -348,46 +348,46 @@ exports[`CommandPalette > renders with custom slot correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with defaultValue correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -398,29 +398,29 @@ exports[`CommandPalette > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with descriptionKey correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors" data-highlighted=""><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create Project</span>
-          <!--v-if--></span><span class="truncate text-muted">Create Project</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors" data-highlighted=""><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create Project</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Create Project</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:file shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Open File</span>
-          <!--v-if--></span><span class="truncate text-muted">Open File</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">O</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:file shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Open File</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Open File</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">O</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:settings shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Settings</span>
-          <!--v-if--></span><span class="truncate text-muted">Settings</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">,</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:settings shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Settings</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Settings</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">,</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-4" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-4" class="p-1.5 text-xs font-semibold text-highlighted">Recent Files</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:file-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">index.vue</span>
-          <!--v-if--></span><span class="truncate text-muted">index.vue</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:file-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">app.vue</span>
-          <!--v-if--></span><span class="truncate text-muted">app.vue</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-4" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-4" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Recent Files</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:file-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">index.vue</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">index.vue</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:file-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">app.vue</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">app.vue</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
     </div>
@@ -431,46 +431,46 @@ exports[`CommandPalette > renders with descriptionKey correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with disabled correctly 1`] = `
-"<div dir="ltr" data-disabled="" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" disabled="" autocomplete="off" data-disabled="" aria-disabled="true" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div dir="ltr" data-disabled="" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" disabled="" autocomplete="off" data-disabled="" aria-disabled="true" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -481,46 +481,46 @@ exports[`CommandPalette > renders with disabled correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with empty slot correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -531,96 +531,96 @@ exports[`CommandPalette > renders with empty slot correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with footer slot correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
   </div>
-  <div class="p-1">Footer slot</div>
+  <div data-slot="footer" class="p-1">Footer slot</div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`CommandPalette > renders with groups correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -631,29 +631,29 @@ exports[`CommandPalette > renders with groups correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with groups with description correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors" data-highlighted=""><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create Project</span>
-          <!--v-if--></span><span class="truncate text-muted">Start a new project from scratch</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors" data-highlighted=""><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create Project</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Start a new project from scratch</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:file shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Open File</span>
-          <!--v-if--></span><span class="truncate text-muted">Browse and open an existing file</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">O</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:file shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Open File</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Browse and open an existing file</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">O</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:settings shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Settings</span>
-          <!--v-if--></span><span class="truncate text-muted">Configure your preferences</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">,</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:settings shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Settings</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Configure your preferences</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">,</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-4" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-4" class="p-1.5 text-xs font-semibold text-highlighted">Recent Files</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:file-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">index.vue</span>
-          <!--v-if--></span><span class="truncate text-muted">/src/pages/index.vue</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:file-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">app.vue</span>
-          <!--v-if--></span><span class="truncate text-muted">/app.vue</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-4" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-4" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Recent Files</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:file-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">index.vue</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">/src/pages/index.vue</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:file-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">app.vue</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">/app.vue</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
     </div>
@@ -664,46 +664,46 @@ exports[`CommandPalette > renders with groups with description correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with icon correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:terminal shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:terminal shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -714,23 +714,23 @@ exports[`CommandPalette > renders with icon correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with item slot correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted="">Item slot</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item slot</button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item slot</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted="">Item slot</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item slot</button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item slot</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item slot</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item slot</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item slot</button>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item slot</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item slot</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item slot</button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item slot</a>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item slot</a>
       </div>
     </div>
   </div>
@@ -740,29 +740,29 @@ exports[`CommandPalette > renders with item slot correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with item-description slot correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors" data-highlighted=""><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create Project</span>
-          <!--v-if--></span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors" data-highlighted=""><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create Project</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:file shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Open File</span>
-          <!--v-if--></span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">O</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:file shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Open File</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">O</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:settings shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Settings</span>
-          <!--v-if--></span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">,</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:settings shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Settings</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">,</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-4" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-4" class="p-1.5 text-xs font-semibold text-highlighted">Recent Files</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:file-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">index.vue</span>
-          <!--v-if--></span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:file-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">app.vue</span>
-          <!--v-if--></span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-4" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-4" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Recent Files</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:file-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">index.vue</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:file-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">app.vue</span>
+          <!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
     </div>
@@ -773,42 +773,42 @@ exports[`CommandPalette > renders with item-description slot correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with item-label slot correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed">Item label slot</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed">Item label slot</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed">Item label slot</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed">Item label slot</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed">Item label slot</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed">Item label slot</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed">Item label slot</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed">Item label slot</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed">Item label slot</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed">Item label slot</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed">Item label slot</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed">Item label slot</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed">Item label slot</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed">Item label slot</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -819,43 +819,43 @@ exports[`CommandPalette > renders with item-label slot correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with item-leading slot correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted="">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted="">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -866,43 +866,43 @@ exports[`CommandPalette > renders with item-leading slot correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with item-trailing slot correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
         </a>
       </div>
     </div>
@@ -913,42 +913,42 @@ exports[`CommandPalette > renders with item-trailing slot correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with labelKey correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">i-lucide-file-plus</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">i-lucide-file-plus</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">i-lucide-folder-plus</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">i-lucide-folder-plus</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">i-lucide-hash</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">i-lucide-hash</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">i-lucide-tag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">i-lucide-tag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div>
-          <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div>
-          <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div>
-          <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div>
+          <!--v-if--><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div>
+          <!--v-if--><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div>
+          <!--v-if--><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <!--v-if--><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
-          <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+        <!--v-if--><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+          <!--v-if--><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -959,46 +959,46 @@ exports[`CommandPalette > renders with labelKey correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with loading correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -1009,46 +1009,46 @@ exports[`CommandPalette > renders with loading correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with loadingIcon correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -1059,46 +1059,46 @@ exports[`CommandPalette > renders with loadingIcon correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with modelValue correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-10"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-10"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="true" data-state="checked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors" data-highlighted=""><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="true" data-state="checked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors" data-highlighted=""><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span></span>
         </a>
       </div>
     </div>
@@ -1109,46 +1109,46 @@ exports[`CommandPalette > renders with modelValue correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with placeholder correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Search..." class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Search..." data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -1159,26 +1159,26 @@ exports[`CommandPalette > renders with placeholder correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with searchTerm and preserveGroupOrder correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="f" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="f" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-3" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-3" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-3" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-3" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
     </div>
@@ -1189,25 +1189,25 @@ exports[`CommandPalette > renders with searchTerm and preserveGroupOrder correct
 `;
 
 exports[`CommandPalette > renders with searchTerm correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="f" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="f" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-0" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors" data-highlighted="">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-0" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors" data-highlighted="">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
@@ -1219,46 +1219,46 @@ exports[`CommandPalette > renders with searchTerm correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with selectedIcon correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-10"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-10"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="true" data-state="checked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors" data-highlighted=""><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="true" data-state="checked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors" data-highlighted=""><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:badge-check shrink-0 size-5" aria-hidden="true"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:badge-check shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span></span>
         </a>
       </div>
     </div>
@@ -1269,44 +1269,44 @@ exports[`CommandPalette > renders with selectedIcon correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with trailingIcon correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:settings shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:settings shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span></div>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -1317,46 +1317,46 @@ exports[`CommandPalette > renders with trailingIcon correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with ui correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-10"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-10"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
-        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">N</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">F</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">H</kbd></span>
           <!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">L</kbd></span>
           <!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-5" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0 size-5"><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </button>
       </div>
-      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span>
           <!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
         </a>
       </div>
     </div>
@@ -1367,12 +1367,12 @@ exports[`CommandPalette > renders with ui correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders with virtualize correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none p-1 isolate">
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none p-1 isolate">
       <div data-reka-virtualizer="" style="position: relative; width: 100%; height: 256px;"></div>
     </div>
   </div>
@@ -1382,12 +1382,12 @@ exports[`CommandPalette > renders with virtualize correctly 1`] = `
 `;
 
 exports[`CommandPalette > renders without groups correctly 1`] = `
-"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
     <!--v-if-->
   </div>
-  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-    <div class="py-6 text-center text-sm text-muted">No data</div>
+  <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div data-slot="empty" class="py-6 text-center text-sm text-muted">No data</div>
   </div>
   <!--v-if-->
   <!--v-if-->
diff --git a/test/components/__snapshots__/ContextMenu-vue.spec.ts.snap b/test/components/__snapshots__/ContextMenu-vue.spec.ts.snap
index 5c2faae845..39c5c2a1d7 100644
--- a/test/components/__snapshots__/ContextMenu-vue.spec.ts.snap
+++ b/test/components/__snapshots__/ContextMenu-vue.spec.ts.snap
@@ -7,50 +7,50 @@ exports[`ContextMenu > renders with class correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -68,50 +68,50 @@ exports[`ContextMenu > renders with custom slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -129,50 +129,50 @@ exports[`ContextMenu > renders with default slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -190,19 +190,19 @@ exports[`ContextMenu > renders with descriptionKey correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span><span class="truncate text-muted">Profile</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span></button>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Profile</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span></button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Dashboard<!--v-if--></span><span class="truncate text-muted">Dashboard</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Dashboard<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Dashboard</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Analytics<!--v-if--></span><span class="truncate text-muted">Analytics</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">A</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Analytics<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Analytics</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">A</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -234,50 +234,50 @@ exports[`ContextMenu > renders with externalIcon correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -295,23 +295,23 @@ exports[`ContextMenu > renders with item slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">Item slot</button>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">Item slot</button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">Item slot</button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">Item slot</button>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">Item slot</button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button></div>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">Item slot</button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</a></div>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</a></div>
     </div>
   </div>
 </div>
@@ -328,19 +328,19 @@ exports[`ContextMenu > renders with item-description slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span></button>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span></button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Dashboard<!--v-if--></span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Dashboard<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Analytics<!--v-if--></span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">A</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Analytics<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">A</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -359,50 +359,50 @@ exports[`ContextMenu > renders with item-label slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -420,42 +420,42 @@ exports[`ContextMenu > renders with item-leading slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -473,48 +473,48 @@ exports[`ContextMenu > renders with item-trailing slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
         </a></div>
     </div>
   </div>
@@ -532,50 +532,50 @@ exports[`ContextMenu > renders with items correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+  <div data-dismissable-layer="" style="--reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -593,19 +593,19 @@ exports[`ContextMenu > renders with items with description correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span><span class="truncate text-muted">View and edit your profile</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span></button>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">View and edit your profile</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span></button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Dashboard<!--v-if--></span><span class="truncate text-muted">Main overview page</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Dashboard<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Main overview page</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Analytics<!--v-if--></span><span class="truncate text-muted">View detailed statistics</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">A</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Analytics<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">View detailed statistics</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">A</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -624,50 +624,50 @@ exports[`ContextMenu > renders with labelKey correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
           <!--v-if-->
-          <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+          <!--v-if--><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
           <!--v-if-->
-          <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+          <!--v-if--><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
           <!--v-if-->
-          <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+          <!--v-if--><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
           <!--v-if-->
-          <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+          <!--v-if--><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
           <!--v-if-->
-          <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
           <!--v-if-->
-          <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
           <!--v-if-->
-          <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+          <!--v-if--><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
           <!--v-if-->
-          <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+          <!--v-if--><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">i-simple-icons-github<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">i-simple-icons-github<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -685,50 +685,50 @@ exports[`ContextMenu > renders with size lg correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-2 text-sm gap-2 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-2 text-sm gap-2 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -746,50 +746,50 @@ exports[`ContextMenu > renders with size md correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -807,50 +807,50 @@ exports[`ContextMenu > renders with size sm correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-4"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-xs gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-xs gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-4"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -868,50 +868,50 @@ exports[`ContextMenu > renders with size xl correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-6"></svg><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-6"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-2 text-base gap-2 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-2 text-base gap-2 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-6"></svg><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-6"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -929,50 +929,50 @@ exports[`ContextMenu > renders with size xs correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-4"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1 text-xs gap-1 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1 text-xs gap-1 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-4"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -990,50 +990,50 @@ exports[`ContextMenu > renders with ui correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -1051,50 +1051,50 @@ exports[`ContextMenu > renders without externalIcon correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
diff --git a/test/components/__snapshots__/ContextMenu.spec.ts.snap b/test/components/__snapshots__/ContextMenu.spec.ts.snap
index 94e55696f6..601f706466 100644
--- a/test/components/__snapshots__/ContextMenu.spec.ts.snap
+++ b/test/components/__snapshots__/ContextMenu.spec.ts.snap
@@ -7,11 +7,11 @@ exports[`ContextMenu > renders with class correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -19,31 +19,31 @@ exports[`ContextMenu > renders with class correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -51,8 +51,8 @@ exports[`ContextMenu > renders with class correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -70,11 +70,11 @@ exports[`ContextMenu > renders with custom slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -82,31 +82,31 @@ exports[`ContextMenu > renders with custom slot correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -114,8 +114,8 @@ exports[`ContextMenu > renders with custom slot correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -133,11 +133,11 @@ exports[`ContextMenu > renders with default slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -145,31 +145,31 @@ exports[`ContextMenu > renders with default slot correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -177,8 +177,8 @@ exports[`ContextMenu > renders with default slot correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -196,9 +196,9 @@ exports[`ContextMenu > renders with descriptionKey correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span><span class="truncate text-muted">Profile</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Profile</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -206,11 +206,11 @@ exports[`ContextMenu > renders with descriptionKey correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Dashboard<!--v-if--></span><span class="truncate text-muted">Dashboard</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Dashboard<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Dashboard</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Analytics<!--v-if--></span><span class="truncate text-muted">Analytics</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">A</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Analytics<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Analytics</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">A</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -242,11 +242,11 @@ exports[`ContextMenu > renders with externalIcon correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -254,31 +254,31 @@ exports[`ContextMenu > renders with externalIcon correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -286,8 +286,8 @@ exports[`ContextMenu > renders with externalIcon correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:external-link inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:external-link inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -305,23 +305,23 @@ exports[`ContextMenu > renders with item slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">Item slot</button>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">Item slot</button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">Item slot</button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">Item slot</button>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">Item slot</button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button></div>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">Item slot</button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</a></div>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</a></div>
     </div>
   </div>
 </div>
@@ -338,9 +338,9 @@ exports[`ContextMenu > renders with item-description slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -348,11 +348,11 @@ exports[`ContextMenu > renders with item-description slot correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Dashboard<!--v-if--></span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Dashboard<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Analytics<!--v-if--></span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">A</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Analytics<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">A</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -371,11 +371,11 @@ exports[`ContextMenu > renders with item-label slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -383,31 +383,31 @@ exports[`ContextMenu > renders with item-label slot correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -415,8 +415,8 @@ exports[`ContextMenu > renders with item-label slot correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -434,10 +434,10 @@ exports[`ContextMenu > renders with item-leading slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -445,24 +445,24 @@ exports[`ContextMenu > renders with item-leading slot correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -470,8 +470,8 @@ exports[`ContextMenu > renders with item-leading slot correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -489,48 +489,48 @@ exports[`ContextMenu > renders with item-trailing slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
         </a></div>
     </div>
   </div>
@@ -548,11 +548,11 @@ exports[`ContextMenu > renders with items correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+  <div data-dismissable-layer="" style="--reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -560,31 +560,31 @@ exports[`ContextMenu > renders with items correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -592,8 +592,8 @@ exports[`ContextMenu > renders with items correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -611,9 +611,9 @@ exports[`ContextMenu > renders with items with description correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span><span class="truncate text-muted">View and edit your profile</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">View and edit your profile</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -621,11 +621,11 @@ exports[`ContextMenu > renders with items with description correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Dashboard<!--v-if--></span><span class="truncate text-muted">Main overview page</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Dashboard<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Main overview page</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Analytics<!--v-if--></span><span class="truncate text-muted">View detailed statistics</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">A</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Analytics<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">View detailed statistics</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">A</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -644,11 +644,11 @@ exports[`ContextMenu > renders with labelKey correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
           <!--v-if-->
-          <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+          <!--v-if--><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -656,31 +656,31 @@ exports[`ContextMenu > renders with labelKey correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
           <!--v-if-->
-          <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+          <!--v-if--><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
           <!--v-if-->
-          <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+          <!--v-if--><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
           <!--v-if-->
-          <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+          <!--v-if--><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
           <!--v-if-->
-          <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
           <!--v-if-->
-          <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
           <!--v-if-->
-          <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+          <!--v-if--><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
           <!--v-if-->
-          <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+          <!--v-if--><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -688,8 +688,8 @@ exports[`ContextMenu > renders with labelKey correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">i-simple-icons-github<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">i-simple-icons-github<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -707,11 +707,11 @@ exports[`ContextMenu > renders with size lg correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -719,31 +719,31 @@ exports[`ContextMenu > renders with size lg correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-2 text-sm gap-2 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-2 text-sm gap-2 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -751,8 +751,8 @@ exports[`ContextMenu > renders with size lg correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -770,11 +770,11 @@ exports[`ContextMenu > renders with size md correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -782,31 +782,31 @@ exports[`ContextMenu > renders with size md correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -814,8 +814,8 @@ exports[`ContextMenu > renders with size md correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -833,11 +833,11 @@ exports[`ContextMenu > renders with size sm correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -845,31 +845,31 @@ exports[`ContextMenu > renders with size sm correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-xs gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-xs gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -877,8 +877,8 @@ exports[`ContextMenu > renders with size sm correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -896,11 +896,11 @@ exports[`ContextMenu > renders with size xl correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true"></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -908,31 +908,31 @@ exports[`ContextMenu > renders with size xl correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-2 text-base gap-2 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-2 text-base gap-2 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true"></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -940,8 +940,8 @@ exports[`ContextMenu > renders with size xl correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -959,11 +959,11 @@ exports[`ContextMenu > renders with size xs correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -971,31 +971,31 @@ exports[`ContextMenu > renders with size xs correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1 text-xs gap-1 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1 text-xs gap-1 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -1003,8 +1003,8 @@ exports[`ContextMenu > renders with size xs correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -1022,11 +1022,11 @@ exports[`ContextMenu > renders with ui correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -1034,31 +1034,31 @@ exports[`ContextMenu > renders with ui correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -1066,8 +1066,8 @@ exports[`ContextMenu > renders with ui correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
@@ -1085,11 +1085,11 @@ exports[`ContextMenu > renders without externalIcon correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Appearance<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="right" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate"><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Appearance<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -1097,31 +1097,31 @@ exports[`ContextMenu > renders without externalIcon correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Sidebar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Sidebar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">S</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Show Toolbar<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Show Toolbar<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">D</kbd></span>
           <!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Collapse Pinned Tabs<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Collapse Pinned Tabs<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Refresh the Page<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cookies and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Clear Cache and Refresh<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Refresh the Page<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cookies and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Clear Cache and Refresh<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
-          <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Developer<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">
+          <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Developer<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
@@ -1129,8 +1129,8 @@ exports[`ContextMenu > renders without externalIcon correctly 1`] = `
         <!---->
         <!--teleport end-->
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a></div>
     </div>
   </div>
diff --git a/test/components/__snapshots__/DashboardNavbar-vue.spec.ts.snap b/test/components/__snapshots__/DashboardNavbar-vue.spec.ts.snap
index 1d8829bd8b..3a2db08765 100644
--- a/test/components/__snapshots__/DashboardNavbar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardNavbar-vue.spec.ts.snap
@@ -3,16 +3,16 @@
 exports[`DashboardNavbar > renders with as correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <section class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <section data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button>
       <!--v-if-->
-      <h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
+      <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5">
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
       <!--v-if-->
     </div>
   </section>
@@ -22,16 +22,16 @@ exports[`DashboardNavbar > renders with as correctly 1`] = `
 exports[`DashboardNavbar > renders with class correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default sm:px-6 gap-1.5 px-8">
-    <div class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default sm:px-6 gap-1.5 px-8">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button>
       <!--v-if-->
-      <h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
+      <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5">
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
       <!--v-if-->
     </div>
   </div>
@@ -41,16 +41,16 @@ exports[`DashboardNavbar > renders with class correctly 1`] = `
 exports[`DashboardNavbar > renders with default slot correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button>
       <!--v-if-->
-      <h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
+      <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
-    <div class="hidden lg:flex">Default slot</div>
-    <div class="flex items-center shrink-0 gap-1.5">
+    <div data-slot="center" class="hidden lg:flex">Default slot</div>
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
       <!--v-if-->
     </div>
   </div>
@@ -60,15 +60,15 @@ exports[`DashboardNavbar > renders with default slot correctly 1`] = `
 exports[`DashboardNavbar > renders with icon correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
-      </button><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 self-center me-1.5"></svg>
-      <h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
+      </button><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5 self-center me-1.5"></svg>
+      <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5">
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
       <!--v-if-->
     </div>
   </div>
@@ -78,14 +78,14 @@ exports[`DashboardNavbar > renders with icon correctly 1`] = `
 exports[`DashboardNavbar > renders with leading slot correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
-      </button>Leading slot<h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
+      </button>Leading slot<h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5">
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
       <!--v-if-->
     </div>
   </div>
@@ -95,13 +95,13 @@ exports[`DashboardNavbar > renders with leading slot correctly 1`] = `
 exports[`DashboardNavbar > renders with left slot correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button>Left slot</div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5">
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
       <!--v-if-->
     </div>
   </div>
@@ -111,16 +111,16 @@ exports[`DashboardNavbar > renders with left slot correctly 1`] = `
 exports[`DashboardNavbar > renders with right slot correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button>
       <!--v-if-->
-      <h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
+      <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5">Right slot
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">Right slot
       <!--v-if-->
     </div>
   </div>
@@ -130,16 +130,16 @@ exports[`DashboardNavbar > renders with right slot correctly 1`] = `
 exports[`DashboardNavbar > renders with title correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button>
       <!--v-if-->
-      <h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate">Dashboard</h1>
+      <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate">Dashboard</h1>
     </div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5">
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
       <!--v-if-->
     </div>
   </div>
@@ -149,16 +149,16 @@ exports[`DashboardNavbar > renders with title correctly 1`] = `
 exports[`DashboardNavbar > renders with title slot correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button>
       <!--v-if-->
-      <h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate">Title slot</h1>
+      <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate">Title slot</h1>
     </div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5">
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
       <!--v-if-->
     </div>
   </div>
@@ -168,16 +168,16 @@ exports[`DashboardNavbar > renders with title slot correctly 1`] = `
 exports[`DashboardNavbar > renders with toggle correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button>
       <!--v-if-->
-      <h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
+      <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5">
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
       <!--v-if-->
     </div>
   </div>
@@ -187,13 +187,13 @@ exports[`DashboardNavbar > renders with toggle correctly 1`] = `
 exports[`DashboardNavbar > renders with toggle slot correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center gap-1.5 min-w-0">Toggle slot
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0">Toggle slot
       <!--v-if-->
-      <h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
+      <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5">
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
       <!--v-if-->
     </div>
   </div>
@@ -203,14 +203,14 @@ exports[`DashboardNavbar > renders with toggle slot correctly 1`] = `
 exports[`DashboardNavbar > renders with toggleSide correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center gap-1.5 min-w-0">
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
       <!--v-if-->
-      <h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
+      <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -221,16 +221,16 @@ exports[`DashboardNavbar > renders with toggleSide correctly 1`] = `
 exports[`DashboardNavbar > renders with trailing slot correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button>
       <!--v-if-->
-      <h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>Trailing slot
+      <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>Trailing slot
     </div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5">
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
       <!--v-if-->
     </div>
   </div>
@@ -240,16 +240,16 @@ exports[`DashboardNavbar > renders with trailing slot correctly 1`] = `
 exports[`DashboardNavbar > renders with ui correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center min-w-0 gap-3"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center min-w-0 gap-3"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button>
       <!--v-if-->
-      <h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
+      <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5">
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
       <!--v-if-->
     </div>
   </div>
@@ -259,14 +259,14 @@ exports[`DashboardNavbar > renders with ui correctly 1`] = `
 exports[`DashboardNavbar > renders without toggle correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center gap-1.5 min-w-0">
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
       <!--v-if-->
-      <h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
+      <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5">
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
       <!--v-if-->
     </div>
   </div>
diff --git a/test/components/__snapshots__/DashboardNavbar.spec.ts.snap b/test/components/__snapshots__/DashboardNavbar.spec.ts.snap
index a3d65c108b..97f31f9d10 100644
--- a/test/components/__snapshots__/DashboardNavbar.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardNavbar.spec.ts.snap
@@ -3,16 +3,16 @@
 exports[`DashboardNavbar > renders with as correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <section class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+  <section data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button>
       <!--v-if-->
-      <h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
+      <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5">
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
       <!--v-if-->
     </div>
   </section>
@@ -22,16 +22,16 @@ exports[`DashboardNavbar > renders with as correctly 1`] = `
 exports[`DashboardNavbar > renders with class correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default sm:px-6 gap-1.5 px-8">
-    <div class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default sm:px-6 gap-1.5 px-8">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button>
       <!--v-if-->
-      <h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
+      <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5">
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
       <!--v-if-->
     </div>
   </div>
@@ -41,16 +41,16 @@ exports[`DashboardNavbar > renders with class correctly 1`] = `
 exports[`DashboardNavbar > renders with default slot correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button>
       <!--v-if-->
-      <h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
+      <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
-    <div class="hidden lg:flex">Default slot</div>
-    <div class="flex items-center shrink-0 gap-1.5">
+    <div data-slot="center" class="hidden lg:flex">Default slot</div>
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
       <!--v-if-->
     </div>
   </div>
@@ -60,15 +60,15 @@ exports[`DashboardNavbar > renders with default slot correctly 1`] = `
 exports[`DashboardNavbar > renders with icon correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-      </button><span class="iconify i-lucide:house shrink-0 size-5 self-center me-1.5" aria-hidden="true"></span>
-      <h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
+      </button><span class="iconify i-lucide:house shrink-0 size-5 self-center me-1.5" aria-hidden="true" data-slot="icon"></span>
+      <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5">
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
       <!--v-if-->
     </div>
   </div>
@@ -78,14 +78,14 @@ exports[`DashboardNavbar > renders with icon correctly 1`] = `
 exports[`DashboardNavbar > renders with leading slot correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-      </button>Leading slot<h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
+      </button>Leading slot<h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5">
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
       <!--v-if-->
     </div>
   </div>
@@ -95,13 +95,13 @@ exports[`DashboardNavbar > renders with leading slot correctly 1`] = `
 exports[`DashboardNavbar > renders with left slot correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button>Left slot</div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5">
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
       <!--v-if-->
     </div>
   </div>
@@ -111,16 +111,16 @@ exports[`DashboardNavbar > renders with left slot correctly 1`] = `
 exports[`DashboardNavbar > renders with right slot correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button>
       <!--v-if-->
-      <h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
+      <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5">Right slot
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">Right slot
       <!--v-if-->
     </div>
   </div>
@@ -130,16 +130,16 @@ exports[`DashboardNavbar > renders with right slot correctly 1`] = `
 exports[`DashboardNavbar > renders with title correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button>
       <!--v-if-->
-      <h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate">Dashboard</h1>
+      <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate">Dashboard</h1>
     </div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5">
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
       <!--v-if-->
     </div>
   </div>
@@ -149,16 +149,16 @@ exports[`DashboardNavbar > renders with title correctly 1`] = `
 exports[`DashboardNavbar > renders with title slot correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button>
       <!--v-if-->
-      <h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate">Title slot</h1>
+      <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate">Title slot</h1>
     </div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5">
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
       <!--v-if-->
     </div>
   </div>
@@ -168,16 +168,16 @@ exports[`DashboardNavbar > renders with title slot correctly 1`] = `
 exports[`DashboardNavbar > renders with toggle correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button>
       <!--v-if-->
-      <h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
+      <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5">
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
       <!--v-if-->
     </div>
   </div>
@@ -187,13 +187,13 @@ exports[`DashboardNavbar > renders with toggle correctly 1`] = `
 exports[`DashboardNavbar > renders with toggle slot correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center gap-1.5 min-w-0">Toggle slot
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0">Toggle slot
       <!--v-if-->
-      <h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
+      <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5">
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
       <!--v-if-->
     </div>
   </div>
@@ -203,14 +203,14 @@ exports[`DashboardNavbar > renders with toggle slot correctly 1`] = `
 exports[`DashboardNavbar > renders with toggleSide correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center gap-1.5 min-w-0">
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
       <!--v-if-->
-      <h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
+      <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -221,16 +221,16 @@ exports[`DashboardNavbar > renders with toggleSide correctly 1`] = `
 exports[`DashboardNavbar > renders with trailing slot correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button>
       <!--v-if-->
-      <h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>Trailing slot
+      <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>Trailing slot
     </div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5">
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
       <!--v-if-->
     </div>
   </div>
@@ -240,16 +240,16 @@ exports[`DashboardNavbar > renders with trailing slot correctly 1`] = `
 exports[`DashboardNavbar > renders with ui correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center min-w-0 gap-3"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center min-w-0 gap-3"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button>
       <!--v-if-->
-      <h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
+      <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5">
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
       <!--v-if-->
     </div>
   </div>
@@ -259,14 +259,14 @@ exports[`DashboardNavbar > renders with ui correctly 1`] = `
 exports[`DashboardNavbar > renders without toggle correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
   <!---->
-  <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
-    <div class="flex items-center gap-1.5 min-w-0">
+  <div data-slot="root" class="h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5">
+    <div data-slot="left" class="flex items-center gap-1.5 min-w-0">
       <!--v-if-->
       <!--v-if-->
-      <h1 class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
+      <h1 data-slot="title" class="flex items-center gap-1.5 font-semibold text-highlighted truncate"></h1>
     </div>
     <!--v-if-->
-    <div class="flex items-center shrink-0 gap-1.5">
+    <div data-slot="right" class="flex items-center shrink-0 gap-1.5">
       <!--v-if-->
     </div>
   </div>
diff --git a/test/components/__snapshots__/DashboardPanel-vue.spec.ts.snap b/test/components/__snapshots__/DashboardPanel-vue.spec.ts.snap
index abaa0c656b..461a0a3526 100644
--- a/test/components/__snapshots__/DashboardPanel-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardPanel-vue.spec.ts.snap
@@ -2,8 +2,8 @@
 
 exports[`DashboardPanel > renders with body slot correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div id="dashboard-panel-v-0" data-dragging="false" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
-    <div class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6">Body slot</div>
+  <div id="dashboard-panel-v-0" data-dragging="false" data-slot="root" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
+    <div data-slot="body" class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6">Body slot</div>
   </div>
   <!--v-if-->
 </div>"
@@ -11,8 +11,8 @@ exports[`DashboardPanel > renders with body slot correctly 1`] = `
 
 exports[`DashboardPanel > renders with class correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div id="dashboard-panel-v-0" data-dragging="false" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1 lg:border-none">
-    <div class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div id="dashboard-panel-v-0" data-dragging="false" data-slot="root" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1 lg:border-none">
+    <div data-slot="body" class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -20,15 +20,15 @@ exports[`DashboardPanel > renders with class correctly 1`] = `
 
 exports[`DashboardPanel > renders with default slot correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div id="dashboard-panel-v-0" data-dragging="false" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">Default slot</div>
+  <div id="dashboard-panel-v-0" data-dragging="false" data-slot="root" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">Default slot</div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`DashboardPanel > renders with defaultSize correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div id="dashboard-panel-v-0" data-dragging="false" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default shrink-0 w-full lg:w-(--width)" style="--width: 50%;">
-    <div class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div id="dashboard-panel-v-0" data-dragging="false" data-slot="root" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default shrink-0 w-full lg:w-(--width)" style="--width: 50%;">
+    <div data-slot="body" class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -36,8 +36,8 @@ exports[`DashboardPanel > renders with defaultSize correctly 1`] = `
 
 exports[`DashboardPanel > renders with footer slot correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div id="dashboard-panel-v-0" data-dragging="false" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
-    <div class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>Footer slot
+  <div id="dashboard-panel-v-0" data-dragging="false" data-slot="root" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
+    <div data-slot="body" class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>Footer slot
   </div>
   <!--v-if-->
 </div>"
@@ -45,7 +45,7 @@ exports[`DashboardPanel > renders with footer slot correctly 1`] = `
 
 exports[`DashboardPanel > renders with header slot correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div id="dashboard-panel-v-0" data-dragging="false" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">Header slot<div class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div id="dashboard-panel-v-0" data-dragging="false" data-slot="root" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">Header slot<div data-slot="body" class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -53,8 +53,8 @@ exports[`DashboardPanel > renders with header slot correctly 1`] = `
 
 exports[`DashboardPanel > renders with id correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div id="dashboard-panel-test" data-dragging="false" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
-    <div class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div id="dashboard-panel-test" data-dragging="false" data-slot="root" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
+    <div data-slot="body" class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -62,8 +62,8 @@ exports[`DashboardPanel > renders with id correctly 1`] = `
 
 exports[`DashboardPanel > renders with maxSize correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div id="dashboard-panel-v-0" data-dragging="false" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
-    <div class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div id="dashboard-panel-v-0" data-dragging="false" data-slot="root" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
+    <div data-slot="body" class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -71,8 +71,8 @@ exports[`DashboardPanel > renders with maxSize correctly 1`] = `
 
 exports[`DashboardPanel > renders with minSize correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div id="dashboard-panel-v-0" data-dragging="false" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
-    <div class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div id="dashboard-panel-v-0" data-dragging="false" data-slot="root" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
+    <div data-slot="body" class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -80,25 +80,25 @@ exports[`DashboardPanel > renders with minSize correctly 1`] = `
 
 exports[`DashboardPanel > renders with resizable correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div id="dashboard-panel-v-0" data-dragging="false" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
-    <div class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div id="dashboard-panel-v-0" data-dragging="false" data-slot="root" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
+    <div data-slot="body" class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
   </div>
-  <div role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5" aria-controls="dashboard-panel-v-0"></div>
+  <div role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5" aria-controls="dashboard-panel-v-0" data-slot="handle"></div>
 </div>"
 `;
 
 exports[`DashboardPanel > renders with resize-handle slot correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div id="dashboard-panel-v-0" data-dragging="false" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
-    <div class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div id="dashboard-panel-v-0" data-dragging="false" data-slot="root" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
+    <div data-slot="body" class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
   </div>Resize handle slot
 </div>"
 `;
 
 exports[`DashboardPanel > renders with ui correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div id="dashboard-panel-v-0" data-dragging="false" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
-    <div class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto sm:p-6 p-8"></div>
+  <div id="dashboard-panel-v-0" data-dragging="false" data-slot="root" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
+    <div data-slot="body" class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto sm:p-6 p-8"></div>
   </div>
   <!--v-if-->
 </div>"
diff --git a/test/components/__snapshots__/DashboardPanel.spec.ts.snap b/test/components/__snapshots__/DashboardPanel.spec.ts.snap
index 59eb7bac55..8d06217e8e 100644
--- a/test/components/__snapshots__/DashboardPanel.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardPanel.spec.ts.snap
@@ -2,8 +2,8 @@
 
 exports[`DashboardPanel > renders with body slot correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div id="dashboard-panel-v-0-0-0" data-dragging="false" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
-    <div class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6">Body slot</div>
+  <div id="dashboard-panel-v-0-0-0" data-dragging="false" data-slot="root" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
+    <div data-slot="body" class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6">Body slot</div>
   </div>
   <!--v-if-->
 </div>"
@@ -11,8 +11,8 @@ exports[`DashboardPanel > renders with body slot correctly 1`] = `
 
 exports[`DashboardPanel > renders with class correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div id="dashboard-panel-v-0-0-0" data-dragging="false" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1 lg:border-none">
-    <div class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div id="dashboard-panel-v-0-0-0" data-dragging="false" data-slot="root" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1 lg:border-none">
+    <div data-slot="body" class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -20,15 +20,15 @@ exports[`DashboardPanel > renders with class correctly 1`] = `
 
 exports[`DashboardPanel > renders with default slot correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div id="dashboard-panel-v-0-0-0" data-dragging="false" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">Default slot</div>
+  <div id="dashboard-panel-v-0-0-0" data-dragging="false" data-slot="root" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">Default slot</div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`DashboardPanel > renders with defaultSize correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div id="dashboard-panel-v-0-0-0" data-dragging="false" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default shrink-0 w-full lg:w-(--width)" style="--width: 50%;">
-    <div class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div id="dashboard-panel-v-0-0-0" data-dragging="false" data-slot="root" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default shrink-0 w-full lg:w-(--width)" style="--width: 50%;">
+    <div data-slot="body" class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -36,8 +36,8 @@ exports[`DashboardPanel > renders with defaultSize correctly 1`] = `
 
 exports[`DashboardPanel > renders with footer slot correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div id="dashboard-panel-v-0-0-0" data-dragging="false" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
-    <div class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>Footer slot
+  <div id="dashboard-panel-v-0-0-0" data-dragging="false" data-slot="root" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
+    <div data-slot="body" class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>Footer slot
   </div>
   <!--v-if-->
 </div>"
@@ -45,7 +45,7 @@ exports[`DashboardPanel > renders with footer slot correctly 1`] = `
 
 exports[`DashboardPanel > renders with header slot correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div id="dashboard-panel-v-0-0-0" data-dragging="false" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">Header slot<div class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div id="dashboard-panel-v-0-0-0" data-dragging="false" data-slot="root" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">Header slot<div data-slot="body" class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -53,8 +53,8 @@ exports[`DashboardPanel > renders with header slot correctly 1`] = `
 
 exports[`DashboardPanel > renders with id correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div id="dashboard-panel-test" data-dragging="false" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
-    <div class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div id="dashboard-panel-test" data-dragging="false" data-slot="root" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
+    <div data-slot="body" class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -62,8 +62,8 @@ exports[`DashboardPanel > renders with id correctly 1`] = `
 
 exports[`DashboardPanel > renders with maxSize correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div id="dashboard-panel-v-0-0-0" data-dragging="false" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
-    <div class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div id="dashboard-panel-v-0-0-0" data-dragging="false" data-slot="root" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
+    <div data-slot="body" class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -71,8 +71,8 @@ exports[`DashboardPanel > renders with maxSize correctly 1`] = `
 
 exports[`DashboardPanel > renders with minSize correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div id="dashboard-panel-v-0-0-0" data-dragging="false" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
-    <div class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div id="dashboard-panel-v-0-0-0" data-dragging="false" data-slot="root" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
+    <div data-slot="body" class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -80,25 +80,25 @@ exports[`DashboardPanel > renders with minSize correctly 1`] = `
 
 exports[`DashboardPanel > renders with resizable correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div id="dashboard-panel-v-0-0-0" data-dragging="false" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
-    <div class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div id="dashboard-panel-v-0-0-0" data-dragging="false" data-slot="root" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
+    <div data-slot="body" class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
   </div>
-  <div role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5" aria-controls="dashboard-panel-v-0-0-0"></div>
+  <div role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5" aria-controls="dashboard-panel-v-0-0-0" data-slot="handle"></div>
 </div>"
 `;
 
 exports[`DashboardPanel > renders with resize-handle slot correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div id="dashboard-panel-v-0-0-0" data-dragging="false" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
-    <div class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div id="dashboard-panel-v-0-0-0" data-dragging="false" data-slot="root" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
+    <div data-slot="body" class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
   </div>Resize handle slot
 </div>"
 `;
 
 exports[`DashboardPanel > renders with ui correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div id="dashboard-panel-v-0-0-0" data-dragging="false" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
-    <div class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto sm:p-6 p-8"></div>
+  <div id="dashboard-panel-v-0-0-0" data-dragging="false" data-slot="root" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
+    <div data-slot="body" class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto sm:p-6 p-8"></div>
   </div>
   <!--v-if-->
 </div>"
diff --git a/test/components/__snapshots__/DashboardSearch-vue.spec.ts.snap b/test/components/__snapshots__/DashboardSearch-vue.spec.ts.snap
index 81edbf935d..498c625ef7 100644
--- a/test/components/__snapshots__/DashboardSearch-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSearch-vue.spec.ts.snap
@@ -5,30 +5,30 @@ exports[`DashboardSearch > renders with class correctly 1`] = `
   <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:h-[28rem] sm:max-w-5xl" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:h-[28rem] sm:max-w-5xl" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
-    <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
-      <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-        <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-          <div role="group" aria-labelledby="reka-listbox-group-v-2" class="p-1 isolate">
-            <div id="reka-listbox-group-v-2" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated">
-              <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
-              <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+    <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+      <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+        <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+          <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-2" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated">
+              <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
+              <!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </a>
           </div>
-          <div role="group" aria-labelledby="reka-listbox-group-v-4" class="p-1 isolate">
-            <div id="reka-listbox-group-v-4" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
+          <div role="group" aria-labelledby="reka-listbox-group-v-4" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-4" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </button>
           </div>
         </div>
@@ -46,30 +46,30 @@ exports[`DashboardSearch > renders with fullscreen correctly 1`] = `
   <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 fixed" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 fixed" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
-    <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
-      <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-        <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-          <div role="group" aria-labelledby="reka-listbox-group-v-2" class="p-1 isolate">
-            <div id="reka-listbox-group-v-2" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated">
-              <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
-              <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+    <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+      <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+        <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+          <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-2" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated">
+              <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
+              <!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </a>
           </div>
-          <div role="group" aria-labelledby="reka-listbox-group-v-4" class="p-1 isolate">
-            <div id="reka-listbox-group-v-4" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
+          <div role="group" aria-labelledby="reka-listbox-group-v-4" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-4" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </button>
           </div>
         </div>
@@ -87,30 +87,30 @@ exports[`DashboardSearch > renders with groups correctly 1`] = `
   <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-  <div data-dismissable-layer="" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
-    <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
-      <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-        <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-          <div role="group" aria-labelledby="reka-listbox-group-v-2" class="p-1 isolate">
-            <div id="reka-listbox-group-v-2" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-              <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
-              <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+    <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+      <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+        <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+          <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-2" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
+              <!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </a>
           </div>
-          <div role="group" aria-labelledby="reka-listbox-group-v-4" class="p-1 isolate">
-            <div id="reka-listbox-group-v-4" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
+          <div role="group" aria-labelledby="reka-listbox-group-v-4" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-4" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </button>
           </div>
         </div>
@@ -128,30 +128,30 @@ exports[`DashboardSearch > renders with icon correctly 1`] = `
   <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
-    <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
-      <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-        <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-          <div role="group" aria-labelledby="reka-listbox-group-v-2" class="p-1 isolate">
-            <div id="reka-listbox-group-v-2" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-              <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
-              <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+    <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+      <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+        <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+          <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-2" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
+              <!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </a>
           </div>
-          <div role="group" aria-labelledby="reka-listbox-group-v-4" class="p-1 isolate">
-            <div id="reka-listbox-group-v-4" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
+          <div role="group" aria-labelledby="reka-listbox-group-v-4" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-4" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </button>
           </div>
         </div>
@@ -169,30 +169,30 @@ exports[`DashboardSearch > renders with loading correctly 1`] = `
   <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
-    <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
-      <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-        <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-          <div role="group" aria-labelledby="reka-listbox-group-v-2" class="p-1 isolate">
-            <div id="reka-listbox-group-v-2" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated">
-              <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
-              <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+    <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+      <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+        <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+          <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-2" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated">
+              <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
+              <!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </a>
           </div>
-          <div role="group" aria-labelledby="reka-listbox-group-v-4" class="p-1 isolate">
-            <div id="reka-listbox-group-v-4" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
+          <div role="group" aria-labelledby="reka-listbox-group-v-4" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-4" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </button>
           </div>
         </div>
@@ -210,30 +210,30 @@ exports[`DashboardSearch > renders with loadingIcon correctly 1`] = `
   <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
-    <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
-      <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-        <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-          <div role="group" aria-labelledby="reka-listbox-group-v-2" class="p-1 isolate">
-            <div id="reka-listbox-group-v-2" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated">
-              <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
-              <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+    <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+      <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+        <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+          <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-2" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated">
+              <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
+              <!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </a>
           </div>
-          <div role="group" aria-labelledby="reka-listbox-group-v-4" class="p-1 isolate">
-            <div id="reka-listbox-group-v-4" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
+          <div role="group" aria-labelledby="reka-listbox-group-v-4" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-4" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </button>
           </div>
         </div>
@@ -251,30 +251,30 @@ exports[`DashboardSearch > renders with placeholder correctly 1`] = `
   <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
-    <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Search" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
-      <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-        <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-          <div role="group" aria-labelledby="reka-listbox-group-v-2" class="p-1 isolate">
-            <div id="reka-listbox-group-v-2" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated">
-              <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
-              <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+    <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Search" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+      <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+        <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+          <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-2" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated">
+              <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
+              <!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </a>
           </div>
-          <div role="group" aria-labelledby="reka-listbox-group-v-4" class="p-1 isolate">
-            <div id="reka-listbox-group-v-4" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
+          <div role="group" aria-labelledby="reka-listbox-group-v-4" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-4" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </button>
           </div>
         </div>
@@ -292,30 +292,30 @@ exports[`DashboardSearch > renders with ui correctly 1`] = `
   <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
-    <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-lg"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
-      <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-        <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-          <div role="group" aria-labelledby="reka-listbox-group-v-2" class="p-1 isolate">
-            <div id="reka-listbox-group-v-2" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated">
-              <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
-              <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+    <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-lg"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+      <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+        <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+          <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-2" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated">
+              <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
+              <!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </a>
           </div>
-          <div role="group" aria-labelledby="reka-listbox-group-v-4" class="p-1 isolate">
-            <div id="reka-listbox-group-v-4" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
+          <div role="group" aria-labelledby="reka-listbox-group-v-4" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-4" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-default"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </button>
           </div>
         </div>
@@ -333,18 +333,18 @@ exports[`DashboardSearch > renders without colorMode correctly 1`] = `
   <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
-    <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
-      <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-        <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-          <div role="group" aria-labelledby="reka-listbox-group-v-2" class="p-1 isolate">
-            <div id="reka-listbox-group-v-2" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated">
-              <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
-              <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+    <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
+      <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+        <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+          <div role="group" aria-labelledby="reka-listbox-group-v-2" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-2" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated">
+              <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
+              <!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </a>
           </div>
         </div>
diff --git a/test/components/__snapshots__/DashboardSearch.spec.ts.snap b/test/components/__snapshots__/DashboardSearch.spec.ts.snap
index 0b605a8c91..09417ed99f 100644
--- a/test/components/__snapshots__/DashboardSearch.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSearch.spec.ts.snap
@@ -5,33 +5,33 @@ exports[`DashboardSearch > renders with class correctly 1`] = `
   <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:h-[28rem] sm:max-w-5xl" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-0-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:h-[28rem] sm:max-w-5xl" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-0-1">dashboardSearch.description</p></span>
     <!---->
-    <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
-      <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-        <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" class="p-1 isolate">
-            <div id="reka-listbox-group-v-0-0-2" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-              <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
+      <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+        <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-0-0-2" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </a>
           </div>
-          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-4" class="p-1 isolate">
-            <div id="reka-listbox-group-v-0-0-4" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
+          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-4" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-0-0-4" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </button>
           </div>
         </div>
@@ -49,33 +49,33 @@ exports[`DashboardSearch > renders with fullscreen correctly 1`] = `
   <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 fixed" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-0-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 fixed" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-0-1">dashboardSearch.description</p></span>
     <!---->
-    <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
-      <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-        <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" class="p-1 isolate">
-            <div id="reka-listbox-group-v-0-0-2" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-              <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
+      <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+        <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-0-0-2" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </a>
           </div>
-          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-4" class="p-1 isolate">
-            <div id="reka-listbox-group-v-0-0-4" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
+          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-4" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-0-0-4" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </button>
           </div>
         </div>
@@ -93,33 +93,33 @@ exports[`DashboardSearch > renders with groups correctly 1`] = `
   <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-  <div data-dismissable-layer="" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-0-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-0-1">dashboardSearch.description</p></span>
     <!---->
-    <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
-      <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-        <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" class="p-1 isolate">
-            <div id="reka-listbox-group-v-0-0-2" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-              <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
+      <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+        <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-0-0-2" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </a>
           </div>
-          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-4" class="p-1 isolate">
-            <div id="reka-listbox-group-v-0-0-4" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
+          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-4" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-0-0-4" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </button>
           </div>
         </div>
@@ -137,33 +137,33 @@ exports[`DashboardSearch > renders with icon correctly 1`] = `
   <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-0-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-0-1">dashboardSearch.description</p></span>
     <!---->
-    <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:home shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:home shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
-      <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-        <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" class="p-1 isolate">
-            <div id="reka-listbox-group-v-0-0-2" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-              <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
+      <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+        <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-0-0-2" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </a>
           </div>
-          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-4" class="p-1 isolate">
-            <div id="reka-listbox-group-v-0-0-4" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
+          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-4" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-0-0-4" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </button>
           </div>
         </div>
@@ -181,33 +181,33 @@ exports[`DashboardSearch > renders with loading correctly 1`] = `
   <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-0-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-0-1">dashboardSearch.description</p></span>
     <!---->
-    <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
-      <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-        <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" class="p-1 isolate">
-            <div id="reka-listbox-group-v-0-0-2" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-              <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
+      <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+        <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-0-0-2" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </a>
           </div>
-          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-4" class="p-1 isolate">
-            <div id="reka-listbox-group-v-0-0-4" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
+          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-4" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-0-0-4" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </button>
           </div>
         </div>
@@ -225,33 +225,33 @@ exports[`DashboardSearch > renders with loadingIcon correctly 1`] = `
   <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-0-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-0-1">dashboardSearch.description</p></span>
     <!---->
-    <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loading shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loading shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
-      <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-        <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" class="p-1 isolate">
-            <div id="reka-listbox-group-v-0-0-2" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-              <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
+      <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+        <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-0-0-2" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </a>
           </div>
-          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-4" class="p-1 isolate">
-            <div id="reka-listbox-group-v-0-0-4" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
+          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-4" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-0-0-4" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </button>
           </div>
         </div>
@@ -269,33 +269,33 @@ exports[`DashboardSearch > renders with placeholder correctly 1`] = `
   <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-0-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-0-1">dashboardSearch.description</p></span>
     <!---->
-    <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Search" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Search" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
-      <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-        <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" class="p-1 isolate">
-            <div id="reka-listbox-group-v-0-0-2" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-              <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
+      <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+        <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-0-0-2" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </a>
           </div>
-          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-4" class="p-1 isolate">
-            <div id="reka-listbox-group-v-0-0-4" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
+          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-4" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-0-0-4" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </button>
           </div>
         </div>
@@ -313,33 +313,33 @@ exports[`DashboardSearch > renders with ui correctly 1`] = `
   <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-0-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-0-1">dashboardSearch.description</p></span>
     <!---->
-    <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-lg"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-lg"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
-      <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-        <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" class="p-1 isolate">
-            <div id="reka-listbox-group-v-0-0-2" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-              <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
+      <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+        <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-0-0-2" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </a>
           </div>
-          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-4" class="p-1 isolate">
-            <div id="reka-listbox-group-v-0-0-4" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
+          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-4" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-0-0-4" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </button>
           </div>
         </div>
@@ -357,21 +357,21 @@ exports[`DashboardSearch > renders without colorMode correctly 1`] = `
   <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-0-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-0-1">dashboardSearch.description</p></span>
     <!---->
-    <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-      <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+      <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if--></button></span>
       </div>
-      <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-        <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" class="p-1 isolate">
-            <div id="reka-listbox-group-v-0-0-2" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
-              <!--v-if--><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
+      <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+        <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+          <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" data-slot="group" class="p-1 isolate">
+            <div id="reka-listbox-group-v-0-0-2" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Go to</div><a href="/" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Home</span>
               <!--v-if--></span>
-              <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+              <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
             </a>
           </div>
         </div>
diff --git a/test/components/__snapshots__/DashboardSearchButton-vue.spec.ts.snap b/test/components/__snapshots__/DashboardSearchButton-vue.spec.ts.snap
index d4826a9a3b..e2b6bda752 100644
--- a/test/components/__snapshots__/DashboardSearchButton-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSearchButton-vue.spec.ts.snap
@@ -1,32 +1,32 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`DashboardSearchButton > renders with class correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted w-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Search…</span>
-  <div class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></div>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted w-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Search…</span>
+  <div data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></div>
 </button>"
 `;
 
 exports[`DashboardSearchButton > renders with collapsed correctly 1`] = `
-"<button type="button" aria-label="Search…" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<button type="button" aria-label="Search…" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`DashboardSearchButton > renders with icon correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Search…</span>
-  <div class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></div>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Search…</span>
+  <div data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></div>
 </button>"
 `;
 
 exports[`DashboardSearchButton > renders with kbds correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Search…</span>
-  <div class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Alt</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">o</kbd></div>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Search…</span>
+  <div data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Alt</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">o</kbd></div>
 </button>"
 `;
 
 exports[`DashboardSearchButton > renders with label correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Open</span>
-  <div class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></div>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Open</span>
+  <div data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></div>
 </button>"
 `;
diff --git a/test/components/__snapshots__/DashboardSearchButton.spec.ts.snap b/test/components/__snapshots__/DashboardSearchButton.spec.ts.snap
index e664c37f75..528d61f2ce 100644
--- a/test/components/__snapshots__/DashboardSearchButton.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSearchButton.spec.ts.snap
@@ -1,32 +1,32 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`DashboardSearchButton > renders with class correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted w-full"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Search…</span>
-  <div class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></div>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted w-full"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Search…</span>
+  <div data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></div>
 </button>"
 `;
 
 exports[`DashboardSearchButton > renders with collapsed correctly 1`] = `
-"<button type="button" aria-label="Search…" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true"></span>
+"<button type="button" aria-label="Search…" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`DashboardSearchButton > renders with icon correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Search…</span>
-  <div class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></div>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Search…</span>
+  <div data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></div>
 </button>"
 `;
 
 exports[`DashboardSearchButton > renders with kbds correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Search…</span>
-  <div class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Alt</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">o</kbd></div>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Search…</span>
+  <div data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Alt</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">o</kbd></div>
 </button>"
 `;
 
 exports[`DashboardSearchButton > renders with label correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Open</span>
-  <div class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></div>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Open</span>
+  <div data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></div>
 </button>"
 `;
diff --git a/test/components/__snapshots__/DashboardSidebar-vue.spec.ts.snap b/test/components/__snapshots__/DashboardSidebar-vue.spec.ts.snap
index 7276385a64..7818e18070 100644
--- a/test/components/__snapshots__/DashboardSidebar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebar-vue.spec.ts.snap
@@ -5,9 +5,9 @@ exports[`DashboardSidebar > renders with class correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default border-none" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default border-none" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -22,9 +22,9 @@ exports[`DashboardSidebar > renders with collapsedSize correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0" data-collapsed="true" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 10%;">
+  <div id="dashboard-sidebar-v-0" data-collapsed="true" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 10%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -39,9 +39,9 @@ exports[`DashboardSidebar > renders with collapsible correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -56,9 +56,9 @@ exports[`DashboardSidebar > renders with content slot correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -73,9 +73,9 @@ exports[`DashboardSidebar > renders with default slot correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2">Default slot</div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2">Default slot</div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -90,9 +90,9 @@ exports[`DashboardSidebar > renders with defaultSize correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 50%;">
+  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 50%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -107,10 +107,10 @@ exports[`DashboardSidebar > renders with footer slot correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
-    <div class="shrink-0 flex items-center gap-1.5 px-4 py-2">Footer slot</div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="footer" class="shrink-0 flex items-center gap-1.5 px-4 py-2">Footer slot</div>
   </div>
   <!--v-if-->
   <!--v-if-->
@@ -124,9 +124,9 @@ exports[`DashboardSidebar > renders with header slot correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
-    <div class="h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4">Header slot</div>
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+    <div data-slot="header" class="h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4">Header slot</div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -141,9 +141,9 @@ exports[`DashboardSidebar > renders with id correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-test" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-test" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -158,9 +158,9 @@ exports[`DashboardSidebar > renders with maxSize correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -175,9 +175,9 @@ exports[`DashboardSidebar > renders with minSize correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -192,19 +192,19 @@ exports[`DashboardSidebar > renders with mode drawer correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75 lg:hidden"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open">
-    <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-1">dashboardSidebar.title</h2><p id="reka-dialog-description-v-2">dashboardSidebar.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75 lg:hidden"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open">
+    <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-1">dashboardSidebar.title</h2><p id="reka-dialog-description-v-2">dashboardSidebar.description</p></span>
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2 sm:px-6"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2 sm:px-6"></div>
     <!--v-if-->
   </div>
   <!--teleport end-->
@@ -216,24 +216,24 @@ exports[`DashboardSidebar > renders with mode modal correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
   <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 lg:hidden"></div>
-  <div data-dismissable-layer="" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none inset-0 fixed lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-1">dashboardSidebar.title</h2><p id="reka-dialog-description-v-2">dashboardSidebar.description</p></span>
-    <div class="h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4 sm:px-6"><button type="button" aria-label="Close sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 lg:hidden"></div>
+  <div data-dismissable-layer="" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none inset-0 fixed lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-1">dashboardSidebar.title</h2><p id="reka-dialog-description-v-2">dashboardSidebar.description</p></span>
+    <div data-slot="header" class="h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4 sm:px-6"><button type="button" aria-label="Close sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button>
       <!--v-if-->
     </div>
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2 sm:px-6"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2 sm:px-6"></div>
     <!--v-if-->
   </div>
   <!--teleport end-->
@@ -245,23 +245,23 @@ exports[`DashboardSidebar > renders with mode slideover correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] lg:hidden"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="left" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none left-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out] lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-1">dashboardSidebar.title</h2><p id="reka-dialog-description-v-2">dashboardSidebar.description</p></span>
-    <div class="h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4 sm:px-6"><button type="button" aria-label="Close sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] lg:hidden"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="left" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none left-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out] lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-1">dashboardSidebar.title</h2><p id="reka-dialog-description-v-2">dashboardSidebar.description</p></span>
+    <div data-slot="header" class="h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4 sm:px-6"><button type="button" aria-label="Close sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button>
       <!--v-if-->
     </div>
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2 sm:px-6"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2 sm:px-6"></div>
     <!--v-if-->
   </div>
   <!--teleport end-->
@@ -273,12 +273,12 @@ exports[`DashboardSidebar > renders with resizable correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
-  <div role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5" aria-controls="dashboard-sidebar-v-0"></div>
+  <div role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5" aria-controls="dashboard-sidebar-v-0" data-slot="handle"></div>
   <!--v-if-->
   <!--teleport start-->
   <!--teleport end-->
@@ -290,9 +290,9 @@ exports[`DashboardSidebar > renders with resize-handle slot correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>Resize handle slot
   <!--v-if-->
@@ -306,9 +306,9 @@ exports[`DashboardSidebar > renders with side right correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -323,9 +323,9 @@ exports[`DashboardSidebar > renders with toggle correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -342,9 +342,9 @@ exports[`DashboardSidebar > renders with toggle slot correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -359,23 +359,23 @@ exports[`DashboardSidebar > renders with toggleSide correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] lg:hidden"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="left" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none left-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out] lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-1">dashboardSidebar.title</h2><p id="reka-dialog-description-v-2">dashboardSidebar.description</p></span>
-    <div class="h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4 sm:px-6">
-      <!--v-if--><button type="button" aria-label="Close sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden ms-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] lg:hidden"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="left" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none left-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out] lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-1">dashboardSidebar.title</h2><p id="reka-dialog-description-v-2">dashboardSidebar.description</p></span>
+    <div data-slot="header" class="h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4 sm:px-6">
+      <!--v-if--><button type="button" aria-label="Close sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden ms-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button>
     </div>
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2 sm:px-6"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2 sm:px-6"></div>
     <!--v-if-->
   </div>
   <!--teleport end-->
@@ -387,9 +387,9 @@ exports[`DashboardSidebar > renders with ui correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-4"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-4"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -404,9 +404,9 @@ exports[`DashboardSidebar > renders without toggle correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
diff --git a/test/components/__snapshots__/DashboardSidebar.spec.ts.snap b/test/components/__snapshots__/DashboardSidebar.spec.ts.snap
index e6824d0d60..0a3ce16c8b 100644
--- a/test/components/__snapshots__/DashboardSidebar.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebar.spec.ts.snap
@@ -5,9 +5,9 @@ exports[`DashboardSidebar > renders with class correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default border-none" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default border-none" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -22,9 +22,9 @@ exports[`DashboardSidebar > renders with collapsedSize correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="true" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 10%;">
+  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="true" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 10%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -39,9 +39,9 @@ exports[`DashboardSidebar > renders with collapsible correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -56,9 +56,9 @@ exports[`DashboardSidebar > renders with content slot correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -73,9 +73,9 @@ exports[`DashboardSidebar > renders with default slot correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2">Default slot</div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2">Default slot</div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -90,9 +90,9 @@ exports[`DashboardSidebar > renders with defaultSize correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 50%;">
+  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 50%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -107,10 +107,10 @@ exports[`DashboardSidebar > renders with footer slot correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
-    <div class="shrink-0 flex items-center gap-1.5 px-4 py-2">Footer slot</div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="footer" class="shrink-0 flex items-center gap-1.5 px-4 py-2">Footer slot</div>
   </div>
   <!--v-if-->
   <!--v-if-->
@@ -124,9 +124,9 @@ exports[`DashboardSidebar > renders with header slot correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
-    <div class="h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4">Header slot</div>
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+    <div data-slot="header" class="h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4">Header slot</div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -141,9 +141,9 @@ exports[`DashboardSidebar > renders with id correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-test" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-test" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -158,9 +158,9 @@ exports[`DashboardSidebar > renders with maxSize correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -175,9 +175,9 @@ exports[`DashboardSidebar > renders with minSize correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -192,19 +192,19 @@ exports[`DashboardSidebar > renders with mode drawer correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75 lg:hidden"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open">
-    <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-1">dashboardSidebar.title</h2><p id="reka-dialog-description-v-0-0-2">dashboardSidebar.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75 lg:hidden"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open">
+    <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-1">dashboardSidebar.title</h2><p id="reka-dialog-description-v-0-0-2">dashboardSidebar.description</p></span>
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2 sm:px-6"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2 sm:px-6"></div>
     <!--v-if-->
   </div>
   <!--teleport end-->
@@ -216,24 +216,24 @@ exports[`DashboardSidebar > renders with mode modal correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
   <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 lg:hidden"></div>
-  <div data-dismissable-layer="" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none inset-0 fixed lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-1">dashboardSidebar.title</h2><p id="reka-dialog-description-v-0-0-2">dashboardSidebar.description</p></span>
-    <div class="h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4 sm:px-6"><button type="button" aria-label="Close sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+  <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 lg:hidden"></div>
+  <div data-dismissable-layer="" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none inset-0 fixed lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-1">dashboardSidebar.title</h2><p id="reka-dialog-description-v-0-0-2">dashboardSidebar.description</p></span>
+    <div data-slot="header" class="h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4 sm:px-6"><button type="button" aria-label="Close sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button>
       <!--v-if-->
     </div>
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2 sm:px-6"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2 sm:px-6"></div>
     <!--v-if-->
   </div>
   <!--teleport end-->
@@ -245,23 +245,23 @@ exports[`DashboardSidebar > renders with mode slideover correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] lg:hidden"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="left" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none left-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out] lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-1">dashboardSidebar.title</h2><p id="reka-dialog-description-v-0-0-2">dashboardSidebar.description</p></span>
-    <div class="h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4 sm:px-6"><button type="button" aria-label="Close sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+  <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] lg:hidden"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="left" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none left-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out] lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-1">dashboardSidebar.title</h2><p id="reka-dialog-description-v-0-0-2">dashboardSidebar.description</p></span>
+    <div data-slot="header" class="h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4 sm:px-6"><button type="button" aria-label="Close sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button>
       <!--v-if-->
     </div>
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2 sm:px-6"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2 sm:px-6"></div>
     <!--v-if-->
   </div>
   <!--teleport end-->
@@ -273,12 +273,12 @@ exports[`DashboardSidebar > renders with resizable correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
-  <div role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5" aria-controls="dashboard-sidebar-v-0-0-0"></div>
+  <div role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5" aria-controls="dashboard-sidebar-v-0-0-0" data-slot="handle"></div>
   <!--v-if-->
   <!--teleport start-->
   <!--teleport end-->
@@ -290,9 +290,9 @@ exports[`DashboardSidebar > renders with resize-handle slot correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>Resize handle slot
   <!--v-if-->
@@ -306,9 +306,9 @@ exports[`DashboardSidebar > renders with side right correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -323,9 +323,9 @@ exports[`DashboardSidebar > renders with toggle correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -342,9 +342,9 @@ exports[`DashboardSidebar > renders with toggle slot correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -359,23 +359,23 @@ exports[`DashboardSidebar > renders with toggleSide correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] lg:hidden"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="left" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none left-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out] lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-1">dashboardSidebar.title</h2><p id="reka-dialog-description-v-0-0-2">dashboardSidebar.description</p></span>
-    <div class="h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4 sm:px-6">
-      <!--v-if--><button type="button" aria-label="Close sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden ms-auto"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+  <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] lg:hidden"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="left" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none left-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out] lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-1">dashboardSidebar.title</h2><p id="reka-dialog-description-v-0-0-2">dashboardSidebar.description</p></span>
+    <div data-slot="header" class="h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4 sm:px-6">
+      <!--v-if--><button type="button" aria-label="Close sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden ms-auto"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button>
     </div>
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2 sm:px-6"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2 sm:px-6"></div>
     <!--v-if-->
   </div>
   <!--teleport end-->
@@ -387,9 +387,9 @@ exports[`DashboardSidebar > renders with ui correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-4"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-4"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -404,9 +404,9 @@ exports[`DashboardSidebar > renders without toggle correctly 1`] = `
   <!---->
   <!---->
   <!--v-if-->
-  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
+  <div id="dashboard-sidebar-v-0-0-0" data-collapsed="false" data-dragging="false" data-slot="root" class="relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0 border-e border-default" style="--width: 15%;">
     <!--v-if-->
-    <div class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
+    <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
   <!--v-if-->
diff --git a/test/components/__snapshots__/DashboardSidebarCollapse-vue.spec.ts.snap b/test/components/__snapshots__/DashboardSidebarCollapse-vue.spec.ts.snap
index 57088bbaf5..fe59bd13a1 100644
--- a/test/components/__snapshots__/DashboardSidebarCollapse-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebarCollapse-vue.spec.ts.snap
@@ -1,28 +1,28 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`DashboardSidebarCollapse > renders with class correctly 1`] = `
-"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Collapse sidebar" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent hidden lg:flex p-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Collapse sidebar" data-slot="base" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent hidden lg:flex p-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
     <!--v-if-->
     <!--v-if-->
   </button></div>"
 `;
 
 exports[`DashboardSidebarCollapse > renders with color correctly 1`] = `
-"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Collapse sidebar" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5 hidden lg:flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Collapse sidebar" data-slot="base" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5 hidden lg:flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
     <!--v-if-->
     <!--v-if-->
   </button></div>"
 `;
 
 exports[`DashboardSidebarCollapse > renders with side correctly 1`] = `
-"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Collapse sidebar" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 hidden lg:flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Collapse sidebar" data-slot="base" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 hidden lg:flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
     <!--v-if-->
     <!--v-if-->
   </button></div>"
 `;
 
 exports[`DashboardSidebarCollapse > renders with variant correctly 1`] = `
-"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Collapse sidebar" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5 hidden lg:flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Collapse sidebar" data-slot="base" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5 hidden lg:flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
     <!--v-if-->
     <!--v-if-->
   </button></div>"
diff --git a/test/components/__snapshots__/DashboardSidebarCollapse.spec.ts.snap b/test/components/__snapshots__/DashboardSidebarCollapse.spec.ts.snap
index b0f6a4d756..3e0af6ba66 100644
--- a/test/components/__snapshots__/DashboardSidebarCollapse.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebarCollapse.spec.ts.snap
@@ -1,28 +1,28 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`DashboardSidebarCollapse > renders with class correctly 1`] = `
-"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Collapse sidebar" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent hidden lg:flex p-3"><span class="iconify i-lucide:panel-left-close shrink-0 size-5" aria-hidden="true"></span>
+"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Collapse sidebar" data-slot="base" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent hidden lg:flex p-3"><span class="iconify i-lucide:panel-left-close shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
   </button></div>"
 `;
 
 exports[`DashboardSidebarCollapse > renders with color correctly 1`] = `
-"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Collapse sidebar" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5 hidden lg:flex"><span class="iconify i-lucide:panel-left-close shrink-0 size-5" aria-hidden="true"></span>
+"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Collapse sidebar" data-slot="base" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5 hidden lg:flex"><span class="iconify i-lucide:panel-left-close shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
   </button></div>"
 `;
 
 exports[`DashboardSidebarCollapse > renders with side correctly 1`] = `
-"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Collapse sidebar" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 hidden lg:flex"><span class="iconify i-lucide:panel-left-close shrink-0 size-5" aria-hidden="true"></span>
+"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Collapse sidebar" data-slot="base" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 hidden lg:flex"><span class="iconify i-lucide:panel-left-close shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
   </button></div>"
 `;
 
 exports[`DashboardSidebarCollapse > renders with variant correctly 1`] = `
-"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Collapse sidebar" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5 hidden lg:flex"><span class="iconify i-lucide:panel-left-close shrink-0 size-5" aria-hidden="true"></span>
+"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Collapse sidebar" data-slot="base" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5 hidden lg:flex"><span class="iconify i-lucide:panel-left-close shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
   </button></div>"
diff --git a/test/components/__snapshots__/DashboardSidebarToggle-vue.spec.ts.snap b/test/components/__snapshots__/DashboardSidebarToggle-vue.spec.ts.snap
index 8ad28ceaa5..01b2439f8a 100644
--- a/test/components/__snapshots__/DashboardSidebarToggle-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebarToggle-vue.spec.ts.snap
@@ -1,28 +1,28 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`DashboardSidebarToggle > renders with class correctly 1`] = `
-"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent lg:hidden p-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent lg:hidden p-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
     <!--v-if-->
     <!--v-if-->
   </button></div>"
 `;
 
 exports[`DashboardSidebarToggle > renders with color correctly 1`] = `
-"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
     <!--v-if-->
     <!--v-if-->
   </button></div>"
 `;
 
 exports[`DashboardSidebarToggle > renders with side correctly 1`] = `
-"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
     <!--v-if-->
     <!--v-if-->
   </button></div>"
 `;
 
 exports[`DashboardSidebarToggle > renders with variant correctly 1`] = `
-"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5 lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
     <!--v-if-->
     <!--v-if-->
   </button></div>"
diff --git a/test/components/__snapshots__/DashboardSidebarToggle.spec.ts.snap b/test/components/__snapshots__/DashboardSidebarToggle.spec.ts.snap
index e4c887692e..8663960d91 100644
--- a/test/components/__snapshots__/DashboardSidebarToggle.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebarToggle.spec.ts.snap
@@ -1,28 +1,28 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`DashboardSidebarToggle > renders with class correctly 1`] = `
-"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent lg:hidden p-3"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent lg:hidden p-3"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
   </button></div>"
 `;
 
 exports[`DashboardSidebarToggle > renders with color correctly 1`] = `
-"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
   </button></div>"
 `;
 
 exports[`DashboardSidebarToggle > renders with side correctly 1`] = `
-"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
   </button></div>"
 `;
 
 exports[`DashboardSidebarToggle > renders with variant correctly 1`] = `
-"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Open sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+"<div class="fixed inset-0 flex overflow-hidden"><button type="button" aria-label="Open sidebar" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5 lg:hidden"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
     <!--v-if-->
     <!--v-if-->
   </button></div>"
diff --git a/test/components/__snapshots__/DashboardToolbar-vue.spec.ts.snap b/test/components/__snapshots__/DashboardToolbar-vue.spec.ts.snap
index 271e3e50c7..39acd6a7bc 100644
--- a/test/components/__snapshots__/DashboardToolbar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardToolbar-vue.spec.ts.snap
@@ -1,38 +1,38 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`DashboardToolbar > renders with as correctly 1`] = `
-"<section class="shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]">
-  <div class="flex items-center gap-1.5"></div>
-  <div class="flex items-center gap-1.5"></div>
+"<section data-slot="root" class="shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]">
+  <div data-slot="left" class="flex items-center gap-1.5"></div>
+  <div data-slot="right" class="flex items-center gap-1.5"></div>
 </section>"
 `;
 
 exports[`DashboardToolbar > renders with class correctly 1`] = `
-"<div class="shrink-0 flex items-center justify-between border-b border-default sm:px-6 gap-1.5 overflow-x-auto min-h-[49px] px-8">
-  <div class="flex items-center gap-1.5"></div>
-  <div class="flex items-center gap-1.5"></div>
+"<div data-slot="root" class="shrink-0 flex items-center justify-between border-b border-default sm:px-6 gap-1.5 overflow-x-auto min-h-[49px] px-8">
+  <div data-slot="left" class="flex items-center gap-1.5"></div>
+  <div data-slot="right" class="flex items-center gap-1.5"></div>
 </div>"
 `;
 
-exports[`DashboardToolbar > renders with default slot correctly 1`] = `"<div class="shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]">Default slot</div>"`;
+exports[`DashboardToolbar > renders with default slot correctly 1`] = `"<div data-slot="root" class="shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]">Default slot</div>"`;
 
 exports[`DashboardToolbar > renders with left slot correctly 1`] = `
-"<div class="shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]">
-  <div class="flex items-center gap-1.5">Left slot</div>
-  <div class="flex items-center gap-1.5"></div>
+"<div data-slot="root" class="shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]">
+  <div data-slot="left" class="flex items-center gap-1.5">Left slot</div>
+  <div data-slot="right" class="flex items-center gap-1.5"></div>
 </div>"
 `;
 
 exports[`DashboardToolbar > renders with right slot correctly 1`] = `
-"<div class="shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]">
-  <div class="flex items-center gap-1.5"></div>
-  <div class="flex items-center gap-1.5">Right slot</div>
+"<div data-slot="root" class="shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]">
+  <div data-slot="left" class="flex items-center gap-1.5"></div>
+  <div data-slot="right" class="flex items-center gap-1.5">Right slot</div>
 </div>"
 `;
 
 exports[`DashboardToolbar > renders with ui correctly 1`] = `
-"<div class="shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]">
-  <div class="flex gap-1.5 items-center">Left slot</div>
-  <div class="flex items-center gap-1.5"></div>
+"<div data-slot="root" class="shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]">
+  <div data-slot="left" class="flex gap-1.5 items-center">Left slot</div>
+  <div data-slot="right" class="flex items-center gap-1.5"></div>
 </div>"
 `;
diff --git a/test/components/__snapshots__/DashboardToolbar.spec.ts.snap b/test/components/__snapshots__/DashboardToolbar.spec.ts.snap
index 271e3e50c7..39acd6a7bc 100644
--- a/test/components/__snapshots__/DashboardToolbar.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardToolbar.spec.ts.snap
@@ -1,38 +1,38 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`DashboardToolbar > renders with as correctly 1`] = `
-"<section class="shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]">
-  <div class="flex items-center gap-1.5"></div>
-  <div class="flex items-center gap-1.5"></div>
+"<section data-slot="root" class="shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]">
+  <div data-slot="left" class="flex items-center gap-1.5"></div>
+  <div data-slot="right" class="flex items-center gap-1.5"></div>
 </section>"
 `;
 
 exports[`DashboardToolbar > renders with class correctly 1`] = `
-"<div class="shrink-0 flex items-center justify-between border-b border-default sm:px-6 gap-1.5 overflow-x-auto min-h-[49px] px-8">
-  <div class="flex items-center gap-1.5"></div>
-  <div class="flex items-center gap-1.5"></div>
+"<div data-slot="root" class="shrink-0 flex items-center justify-between border-b border-default sm:px-6 gap-1.5 overflow-x-auto min-h-[49px] px-8">
+  <div data-slot="left" class="flex items-center gap-1.5"></div>
+  <div data-slot="right" class="flex items-center gap-1.5"></div>
 </div>"
 `;
 
-exports[`DashboardToolbar > renders with default slot correctly 1`] = `"<div class="shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]">Default slot</div>"`;
+exports[`DashboardToolbar > renders with default slot correctly 1`] = `"<div data-slot="root" class="shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]">Default slot</div>"`;
 
 exports[`DashboardToolbar > renders with left slot correctly 1`] = `
-"<div class="shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]">
-  <div class="flex items-center gap-1.5">Left slot</div>
-  <div class="flex items-center gap-1.5"></div>
+"<div data-slot="root" class="shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]">
+  <div data-slot="left" class="flex items-center gap-1.5">Left slot</div>
+  <div data-slot="right" class="flex items-center gap-1.5"></div>
 </div>"
 `;
 
 exports[`DashboardToolbar > renders with right slot correctly 1`] = `
-"<div class="shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]">
-  <div class="flex items-center gap-1.5"></div>
-  <div class="flex items-center gap-1.5">Right slot</div>
+"<div data-slot="root" class="shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]">
+  <div data-slot="left" class="flex items-center gap-1.5"></div>
+  <div data-slot="right" class="flex items-center gap-1.5">Right slot</div>
 </div>"
 `;
 
 exports[`DashboardToolbar > renders with ui correctly 1`] = `
-"<div class="shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]">
-  <div class="flex gap-1.5 items-center">Left slot</div>
-  <div class="flex items-center gap-1.5"></div>
+"<div data-slot="root" class="shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]">
+  <div data-slot="left" class="flex gap-1.5 items-center">Left slot</div>
+  <div data-slot="right" class="flex items-center gap-1.5"></div>
 </div>"
 `;
diff --git a/test/components/__snapshots__/Drawer-vue.spec.ts.snap b/test/components/__snapshots__/Drawer-vue.spec.ts.snap
index d8b96ce064..a53b808e94 100644
--- a/test/components/__snapshots__/Drawer-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Drawer-vue.spec.ts.snap
@@ -5,13 +5,13 @@ exports[`Drawer > renders with body slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
-    <div class="flex-1">Body slot</div>
+    <div data-slot="body" class="flex-1">Body slot</div>
     <!--v-if-->
   </div>
 </div>
@@ -25,11 +25,11 @@ exports[`Drawer > renders with class correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg bg-elevated" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg bg-elevated" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
@@ -45,9 +45,9 @@ exports[`Drawer > renders with content slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->Content slot
 </div>
 
@@ -60,11 +60,11 @@ exports[`Drawer > renders with default slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="reka-dialog-content-v-0" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="reka-dialog-content-v-0" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
@@ -80,14 +80,14 @@ exports[`Drawer > renders with description correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -103,14 +103,14 @@ exports[`Drawer > renders with description slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
       <!--v-if-->
-      <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description slot</p>
+      <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description slot</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -126,14 +126,14 @@ exports[`Drawer > renders with direction bottom correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -149,14 +149,14 @@ exports[`Drawer > renders with direction bottom inset correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] h-auto max-h-[96%] inset-x-4 bottom-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] h-auto max-h-[96%] inset-x-4 bottom-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -172,14 +172,14 @@ exports[`Drawer > renders with direction left correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="left" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none flex-row-reverse w-auto max-w-[calc(100%-2rem)] inset-y-0 left-0 rounded-r-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity !mr-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="left" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none flex-row-reverse w-auto max-w-[calc(100%-2rem)] inset-y-0 left-0 rounded-r-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity !mr-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -195,14 +195,14 @@ exports[`Drawer > renders with direction left inset correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="left" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none flex-row-reverse rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] w-auto max-w-[calc(100%-2rem)] inset-y-4 left-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity !mr-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="left" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none flex-row-reverse rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] w-auto max-w-[calc(100%-2rem)] inset-y-4 left-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity !mr-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -218,14 +218,14 @@ exports[`Drawer > renders with direction right correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none flex-row w-auto max-w-[calc(100%-2rem)] inset-y-0 right-0 rounded-l-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity !ml-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none flex-row w-auto max-w-[calc(100%-2rem)] inset-y-0 right-0 rounded-l-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity !ml-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -241,14 +241,14 @@ exports[`Drawer > renders with direction right inset correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none flex-row rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] w-auto max-w-[calc(100%-2rem)] inset-y-4 right-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity !ml-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none flex-row rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] w-auto max-w-[calc(100%-2rem)] inset-y-4 right-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity !ml-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -264,14 +264,14 @@ exports[`Drawer > renders with direction top correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="top" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mb-24 flex-col-reverse h-auto max-h-[96%] inset-x-0 top-0 rounded-b-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mb-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="top" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mb-24 flex-col-reverse h-auto max-h-[96%] inset-x-0 top-0 rounded-b-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mb-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -287,14 +287,14 @@ exports[`Drawer > renders with direction top inset correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="top" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mb-24 flex-col-reverse rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] h-auto max-h-[96%] inset-x-4 top-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mb-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="top" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mb-24 flex-col-reverse rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] h-auto max-h-[96%] inset-x-4 top-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mb-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -310,14 +310,14 @@ exports[`Drawer > renders with footer slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
-    <div class="flex flex-col gap-1.5">Footer slot</div>
+    <div data-slot="footer" class="flex flex-col gap-1.5">Footer slot</div>
   </div>
 </div>
 
@@ -330,12 +330,12 @@ exports[`Drawer > renders with header slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">Header slot</div>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">Header slot</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -350,13 +350,13 @@ exports[`Drawer > renders with title correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -373,13 +373,13 @@ exports[`Drawer > renders with title slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title slot</h2>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title slot</h2>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -396,11 +396,11 @@ exports[`Drawer > renders with ui correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto w-20"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto w-20"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
@@ -416,14 +416,14 @@ exports[`Drawer > renders without handle correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -440,13 +440,13 @@ exports[`Drawer > renders without overlay correctly 1`] = `
 
 
 <!--v-if-->
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
diff --git a/test/components/__snapshots__/Drawer.spec.ts.snap b/test/components/__snapshots__/Drawer.spec.ts.snap
index 79ab5a352e..34138b8885 100644
--- a/test/components/__snapshots__/Drawer.spec.ts.snap
+++ b/test/components/__snapshots__/Drawer.spec.ts.snap
@@ -5,13 +5,13 @@ exports[`Drawer > renders with body slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
-    <div class="flex-1">Body slot</div>
+    <div data-slot="body" class="flex-1">Body slot</div>
     <!--v-if-->
   </div>
 </div>
@@ -25,11 +25,11 @@ exports[`Drawer > renders with class correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg bg-elevated" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg bg-elevated" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
@@ -45,9 +45,9 @@ exports[`Drawer > renders with content slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->Content slot
 </div>
 
@@ -60,11 +60,11 @@ exports[`Drawer > renders with default slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="reka-dialog-content-v-0-0-0" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="reka-dialog-content-v-0-0-0" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
@@ -80,14 +80,14 @@ exports[`Drawer > renders with description correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -103,14 +103,14 @@ exports[`Drawer > renders with description slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
       <!--v-if-->
-      <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description slot</p>
+      <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description slot</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -126,14 +126,14 @@ exports[`Drawer > renders with direction bottom correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -149,14 +149,14 @@ exports[`Drawer > renders with direction bottom inset correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] h-auto max-h-[96%] inset-x-4 bottom-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] h-auto max-h-[96%] inset-x-4 bottom-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -172,14 +172,14 @@ exports[`Drawer > renders with direction left correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="left" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none flex-row-reverse w-auto max-w-[calc(100%-2rem)] inset-y-0 left-0 rounded-r-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity !mr-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="left" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none flex-row-reverse w-auto max-w-[calc(100%-2rem)] inset-y-0 left-0 rounded-r-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity !mr-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -195,14 +195,14 @@ exports[`Drawer > renders with direction left inset correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="left" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none flex-row-reverse rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] w-auto max-w-[calc(100%-2rem)] inset-y-4 left-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity !mr-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="left" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none flex-row-reverse rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] w-auto max-w-[calc(100%-2rem)] inset-y-4 left-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity !mr-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -218,14 +218,14 @@ exports[`Drawer > renders with direction right correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none flex-row w-auto max-w-[calc(100%-2rem)] inset-y-0 right-0 rounded-l-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity !ml-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none flex-row w-auto max-w-[calc(100%-2rem)] inset-y-0 right-0 rounded-l-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity !ml-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -241,14 +241,14 @@ exports[`Drawer > renders with direction right inset correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none flex-row rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] w-auto max-w-[calc(100%-2rem)] inset-y-4 right-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity !ml-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none flex-row rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] w-auto max-w-[calc(100%-2rem)] inset-y-4 right-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity !ml-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -264,14 +264,14 @@ exports[`Drawer > renders with direction top correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="top" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mb-24 flex-col-reverse h-auto max-h-[96%] inset-x-0 top-0 rounded-b-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mb-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="top" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mb-24 flex-col-reverse h-auto max-h-[96%] inset-x-0 top-0 rounded-b-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mb-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -287,14 +287,14 @@ exports[`Drawer > renders with direction top inset correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="top" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mb-24 flex-col-reverse rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] h-auto max-h-[96%] inset-x-4 top-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mb-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="top" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mb-24 flex-col-reverse rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] h-auto max-h-[96%] inset-x-4 top-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mb-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -310,14 +310,14 @@ exports[`Drawer > renders with footer slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
-    <div class="flex flex-col gap-1.5">Footer slot</div>
+    <div data-slot="footer" class="flex flex-col gap-1.5">Footer slot</div>
   </div>
 </div>
 
@@ -330,12 +330,12 @@ exports[`Drawer > renders with header slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">Header slot</div>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">Header slot</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -350,13 +350,13 @@ exports[`Drawer > renders with title correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -373,13 +373,13 @@ exports[`Drawer > renders with title slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title slot</h2>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title slot</h2>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -396,11 +396,11 @@ exports[`Drawer > renders with ui correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto w-20"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto w-20"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
@@ -416,14 +416,14 @@ exports[`Drawer > renders without handle correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -440,13 +440,13 @@ exports[`Drawer > renders without overlay correctly 1`] = `
 
 
 <!--v-if-->
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <!--v-if-->
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
+  <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div data-slot="header" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
diff --git a/test/components/__snapshots__/DropdownMenu-vue.spec.ts.snap b/test/components/__snapshots__/DropdownMenu-vue.spec.ts.snap
index 4fd6c2f6fc..fbab9d7892 100644
--- a/test/components/__snapshots__/DropdownMenu-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DropdownMenu-vue.spec.ts.snap
@@ -7,51 +7,51 @@ exports[`DropdownMenu > renders with arrow correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
-    </div><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" class="fill-default" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span>
+    </div><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" data-slot="arrow" class="fill-default" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span>
   </div>
 </div>
 
@@ -67,48 +67,48 @@ exports[`DropdownMenu > renders with class correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col min-w-96" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col min-w-96" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -127,46 +127,46 @@ exports[`DropdownMenu > renders with custom slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Custom slot</button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Custom slot</button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -185,48 +185,48 @@ exports[`DropdownMenu > renders with default slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-1" aria-labelledby="reka-dropdown-menu-trigger-v-0" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-1" aria-labelledby="reka-dropdown-menu-trigger-v-0" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-2" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-2" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -245,48 +245,48 @@ exports[`DropdownMenu > renders with descriptionKey correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -305,48 +305,48 @@ exports[`DropdownMenu > renders with disabled correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -365,48 +365,48 @@ exports[`DropdownMenu > renders with externalIcon correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -425,24 +425,24 @@ exports[`DropdownMenu > renders with item slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5">Item slot</div>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5">Item slot</div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">Item slot</button>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button></div>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">Item slot</button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</a>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10">Item slot</button></div>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10">Item slot</button></div>
     </div>
   </div>
 </div>
@@ -459,12 +459,12 @@ exports[`DropdownMenu > renders with item-description slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span><span class="truncate text-muted">View your profile</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">View your profile</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -483,48 +483,48 @@ exports[`DropdownMenu > renders with item-label slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -543,48 +543,48 @@ exports[`DropdownMenu > renders with item-leading slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -603,45 +603,45 @@ exports[`DropdownMenu > renders with item-trailing slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
         </button></div>
     </div>
   </div>
@@ -659,48 +659,48 @@ exports[`DropdownMenu > renders with items correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -719,12 +719,12 @@ exports[`DropdownMenu > renders with items with description correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span><span class="truncate text-muted">Account settings</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Account settings</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span><span class="truncate text-muted">View your profile</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span><span class="truncate text-muted">Manage billing</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">View your profile</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Manage billing</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -743,48 +743,48 @@ exports[`DropdownMenu > renders with labelKey correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
-          <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+          <!--v-if--><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">i-lucide-user<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">i-lucide-credit-card<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">i-lucide-user<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">i-lucide-credit-card<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">i-lucide-cog<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">i-lucide-cog<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">i-lucide-users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">i-lucide-user-plus<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">i-lucide-users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">i-lucide-user-plus<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">i-lucide-plus<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">i-lucide-plus<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">i-simple-icons-github<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">i-lucide-life-buoy<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">i-simple-icons-github<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">i-lucide-life-buoy<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">i-lucide-key-round<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">i-lucide-box<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">i-lucide-key-round<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">i-lucide-box<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">i-lucide-log-out<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">i-lucide-log-out<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -803,48 +803,48 @@ exports[`DropdownMenu > renders with size lg correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-2 text-sm gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-2 text-sm gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-2 text-sm gap-2 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-2 text-sm gap-2 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -863,48 +863,48 @@ exports[`DropdownMenu > renders with size md correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -923,48 +923,48 @@ exports[`DropdownMenu > renders with size sm correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-xs gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-xs gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="16" height="16" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-4"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-xs gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transition-colors size-4 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-xs gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 transition-colors size-4 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -983,48 +983,48 @@ exports[`DropdownMenu > renders with size xl correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-2 text-base gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-6 text-xs shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-2 text-base gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-6 text-xs shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="24" height="24" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-6"></svg><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-6"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-2 text-base gap-2 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transition-colors size-6 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-2 text-base gap-2 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 transition-colors size-6 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -1043,48 +1043,48 @@ exports[`DropdownMenu > renders with size xs correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1 text-xs gap-1"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1 text-xs gap-1"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="16" height="16" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-4"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1 text-xs gap-1 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transition-colors size-4 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1 text-xs gap-1 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 transition-colors size-4 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -1103,48 +1103,48 @@ exports[`DropdownMenu > renders with ui correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transition-colors text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error size-4"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 transition-colors text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -1163,48 +1163,48 @@ exports[`DropdownMenu > renders without externalIcon correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg><!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
diff --git a/test/components/__snapshots__/DropdownMenu.spec.ts.snap b/test/components/__snapshots__/DropdownMenu.spec.ts.snap
index 4a7fb5f4bf..3d8724a9e5 100644
--- a/test/components/__snapshots__/DropdownMenu.spec.ts.snap
+++ b/test/components/__snapshots__/DropdownMenu.spec.ts.snap
@@ -7,52 +7,52 @@ exports[`DropdownMenu > renders with arrow correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
-    </div><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" class="fill-default" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span>
+    </div><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" data-slot="arrow" class="fill-default" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span>
   </div>
 </div>
 
@@ -68,49 +68,49 @@ exports[`DropdownMenu > renders with class correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col min-w-96" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col min-w-96" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -129,47 +129,47 @@ exports[`DropdownMenu > renders with custom slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Custom slot</button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Custom slot</button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -188,49 +188,49 @@ exports[`DropdownMenu > renders with default slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-1" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-0" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-1" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-0" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-2" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-2" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -249,49 +249,49 @@ exports[`DropdownMenu > renders with descriptionKey correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -310,49 +310,49 @@ exports[`DropdownMenu > renders with disabled correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -371,49 +371,49 @@ exports[`DropdownMenu > renders with externalIcon correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:external-link inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:external-link inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -432,24 +432,24 @@ exports[`DropdownMenu > renders with item slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5">Item slot</div>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5">Item slot</div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">Item slot</button>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button></div>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">Item slot</button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</a>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10">Item slot</button></div>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10">Item slot</button></div>
     </div>
   </div>
 </div>
@@ -466,12 +466,12 @@ exports[`DropdownMenu > renders with item-description slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span><span class="truncate text-muted">View your profile</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">View your profile</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -490,49 +490,49 @@ exports[`DropdownMenu > renders with item-label slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Item label slot<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -551,49 +551,49 @@ exports[`DropdownMenu > renders with item-leading slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10">Item leading slot<span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -612,45 +612,45 @@ exports[`DropdownMenu > renders with item-trailing slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
         </button></div>
     </div>
   </div>
@@ -668,49 +668,49 @@ exports[`DropdownMenu > renders with items correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="--reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -729,12 +729,12 @@ exports[`DropdownMenu > renders with items with description correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span><span class="truncate text-muted">Account settings</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Account settings</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span><span class="truncate text-muted">View your profile</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span><span class="truncate text-muted">Manage billing</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">View your profile</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span><span data-slot="itemDescription" class="truncate text-muted">Manage billing</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -753,49 +753,49 @@ exports[`DropdownMenu > renders with labelKey correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
-          <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+          <!--v-if--><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">i-lucide-user<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">i-lucide-credit-card<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">i-lucide-user<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">i-lucide-credit-card<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">i-lucide-cog<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">i-lucide-cog<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">i-lucide-users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">i-lucide-user-plus<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">i-lucide-users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">i-lucide-user-plus<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">i-lucide-plus<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">i-lucide-plus<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">i-simple-icons-github<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">i-lucide-life-buoy<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">i-simple-icons-github<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">i-lucide-life-buoy<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">i-lucide-key-round<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">i-lucide-box<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">i-lucide-key-round<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">i-lucide-box<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">i-lucide-log-out<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">i-lucide-log-out<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -814,49 +814,49 @@ exports[`DropdownMenu > renders with size lg correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-2 text-sm gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-2 text-sm gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-2 text-sm gap-2 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-2 text-sm gap-2 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -875,49 +875,49 @@ exports[`DropdownMenu > renders with size md correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -936,49 +936,49 @@ exports[`DropdownMenu > renders with size sm correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-xs gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-xs gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="16" height="16" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-xs gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-4 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-xs gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-4 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -997,49 +997,49 @@ exports[`DropdownMenu > renders with size xl correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-2 text-base gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-6 text-xs shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-2 text-base gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-6 text-xs shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="24" height="24" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true"></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-2 text-base gap-2 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-6 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-2 text-base gap-2 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-6 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-6 min-w-[24px] text-[12px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -1058,49 +1058,49 @@ exports[`DropdownMenu > renders with size xs correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1 text-xs gap-1"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1 text-xs gap-1"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="16" height="16" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1 text-xs gap-1 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-4 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1 text-xs gap-1 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-4 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -1119,49 +1119,49 @@ exports[`DropdownMenu > renders with ui correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="itemLabelExternalIcon"></span></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
@@ -1180,49 +1180,49 @@ exports[`DropdownMenu > renders without externalIcon correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" class="p-1 isolate">
-        <div class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">My account<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+  <div data-dismissable-layer="" style="pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" tabindex="-1" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" data-slot="content" class="min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col" data-orientation="vertical" dir="ltr" role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" data-side="bottom" data-align="center">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" data-slot="group" class="p-1 isolate">
+        <div data-slot="label" class="w-full flex items-center font-semibold text-highlighted p-1.5 text-sm gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">My account<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </div>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Profile<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Billing<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Profile<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Billing<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">b</kbd></span>
           <!----></span>
-        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Settings<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
+        </button><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Settings<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">?</kbd></span>
           <!----></span>
         </button></div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Invite users<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button data-reka-collection-item="" role="menuitem" tabindex="-1" type="button" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed"><span class="iconify i-lucide:user-plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Invite users<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span>
           <!----></span>
         </button>
         <!---->
         <!--teleport start-->
         <!---->
-        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">New team<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
+        <!--teleport end--><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">New team<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">n</kbd></span>
           <!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">GitHub<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Support<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">GitHub<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Support<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </a>
-        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Keyboard Shortcuts<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">API<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        <div role="separator" aria-orientation="horizontal" data-slot="separator" class="-mx-1 my-1 h-px bg-border"></div><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Keyboard Shortcuts<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">API<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
         </button>
       </div>
-      <div role="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate">Logout<!--v-if--></span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
+      <div role="group" data-slot="group" class="p-1 isolate"><button type="button" data-reka-collection-item="" role="menuitem" tabindex="-1" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-highlighted transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-error data-highlighted:text-error data-highlighted:before:bg-error/10 data-[state=open]:before:bg-error/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-error/75 group-data-highlighted:text-error group-data-[state=open]:text-error" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate">Logout<!--v-if--></span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="itemTrailingKbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default">q</kbd></span>
           <!----></span>
         </button></div>
     </div>
diff --git a/test/components/__snapshots__/Empty-vue.spec.ts.snap b/test/components/__snapshots__/Empty-vue.spec.ts.snap
index d7a31c4334..2538b4cd7d 100644
--- a/test/components/__snapshots__/Empty-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Empty-vue.spec.ts.snap
@@ -1,13 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Empty > renders with actions correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -16,20 +16,20 @@ exports[`Empty > renders with actions correctly 1`] = `
 `;
 
 exports[`Empty > renders with actions slot correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0">Actions slot</div>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0">Actions slot</div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Empty > renders with as correctly 1`] = `
-"<section class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+"<section data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -37,8 +37,8 @@ exports[`Empty > renders with as correctly 1`] = `
 `;
 
 exports[`Empty > renders with avatar correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><img src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><img src="https://github.com/benjamincanac.png" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -48,24 +48,24 @@ exports[`Empty > renders with avatar correctly 1`] = `
 `;
 
 exports[`Empty > renders with body slot correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">Body slot</div>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">Body slot</div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Empty > renders with class correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default gap-6">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default gap-6">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -74,10 +74,10 @@ exports[`Empty > renders with class correctly 1`] = `
 `;
 
 exports[`Empty > renders with description correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
   </div>
   <!--v-if-->
   <!--v-if-->
@@ -85,13 +85,13 @@ exports[`Empty > renders with description correctly 1`] = `
 `;
 
 exports[`Empty > renders with description slot correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-muted">Description slot</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description slot</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -100,25 +100,25 @@ exports[`Empty > renders with description slot correctly 1`] = `
 `;
 
 exports[`Empty > renders with footer slot correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
-  <div class="flex flex-col items-center gap-2 max-w-sm">Footer slot</div>
+  <div data-slot="footer" class="flex flex-col items-center gap-2 max-w-sm">Footer slot</div>
 </div>"
 `;
 
 exports[`Empty > renders with header slot correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center">Header slot</div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Add</span>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center">Header slot</div>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -127,8 +127,8 @@ exports[`Empty > renders with header slot correctly 1`] = `
 `;
 
 exports[`Empty > renders with icon correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -138,12 +138,12 @@ exports[`Empty > renders with icon correctly 1`] = `
 `;
 
 exports[`Empty > renders with leading slot correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center">Leading slot<h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center">Leading slot<h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -152,13 +152,13 @@ exports[`Empty > renders with leading slot correctly 1`] = `
 `;
 
 exports[`Empty > renders with primary variant naked correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -167,13 +167,13 @@ exports[`Empty > renders with primary variant naked correctly 1`] = `
 `;
 
 exports[`Empty > renders with primary variant outline correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -182,13 +182,13 @@ exports[`Empty > renders with primary variant outline correctly 1`] = `
 `;
 
 exports[`Empty > renders with primary variant soft correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-elevated/50">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-toned">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-elevated/50">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-toned">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -197,13 +197,13 @@ exports[`Empty > renders with primary variant soft correctly 1`] = `
 `;
 
 exports[`Empty > renders with primary variant solid correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-inverted">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
-    <h2 class="text-pretty font-medium text-base text-inverted">Title</h2>
-    <div class="text-balance text-center text-sm text-dimmed">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-inverted">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
+    <h2 data-slot="title" class="text-pretty font-medium text-base text-inverted">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-dimmed">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -212,13 +212,13 @@ exports[`Empty > renders with primary variant solid correctly 1`] = `
 `;
 
 exports[`Empty > renders with primary variant subtle correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-elevated/50 ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-toned">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-elevated/50 ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-toned">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -227,13 +227,13 @@ exports[`Empty > renders with primary variant subtle correctly 1`] = `
 `;
 
 exports[`Empty > renders with size lg correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-11 text-[22px]"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-11 text-[22px]"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -242,13 +242,13 @@ exports[`Empty > renders with size lg correctly 1`] = `
 `;
 
 exports[`Empty > renders with size md correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -257,13 +257,13 @@ exports[`Empty > renders with size md correctly 1`] = `
 `;
 
 exports[`Empty > renders with size sm correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-9 text-lg"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
-    <h2 class="text-highlighted text-pretty font-medium text-sm">Title</h2>
-    <div class="text-balance text-center text-xs text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-9 text-lg"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-sm">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-xs text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -272,13 +272,13 @@ exports[`Empty > renders with size sm correctly 1`] = `
 `;
 
 exports[`Empty > renders with size xl correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-12 text-2xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
-    <h2 class="text-highlighted text-pretty font-medium text-lg">Title</h2>
-    <div class="text-balance text-center text-base text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-12 text-2xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-lg">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-base text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-6"></svg><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -287,13 +287,13 @@ exports[`Empty > renders with size xl correctly 1`] = `
 `;
 
 exports[`Empty > renders with size xs correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-8 text-base"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
-    <h2 class="text-highlighted text-pretty font-medium text-sm">Title</h2>
-    <div class="text-balance text-center text-xs text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-8 text-base"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-sm">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-xs text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -302,9 +302,9 @@ exports[`Empty > renders with size xs correctly 1`] = `
 `;
 
 exports[`Empty > renders with title correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -313,13 +313,13 @@ exports[`Empty > renders with title correctly 1`] = `
 `;
 
 exports[`Empty > renders with title slot correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title slot</h2>
-    <div class="text-balance text-center text-sm text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title slot</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -328,13 +328,13 @@ exports[`Empty > renders with title slot correctly 1`] = `
 `;
 
 exports[`Empty > renders with ui correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
diff --git a/test/components/__snapshots__/Empty.spec.ts.snap b/test/components/__snapshots__/Empty.spec.ts.snap
index 372bef4e53..c584b59520 100644
--- a/test/components/__snapshots__/Empty.spec.ts.snap
+++ b/test/components/__snapshots__/Empty.spec.ts.snap
@@ -1,13 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Empty > renders with actions correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true"></span></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -16,20 +16,20 @@ exports[`Empty > renders with actions correctly 1`] = `
 `;
 
 exports[`Empty > renders with actions slot correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true"></span></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0">Actions slot</div>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0">Actions slot</div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Empty > renders with as correctly 1`] = `
-"<section class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+"<section data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -37,8 +37,8 @@ exports[`Empty > renders with as correctly 1`] = `
 `;
 
 exports[`Empty > renders with avatar correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><img src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><img src="https://github.com/benjamincanac.png" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -48,24 +48,24 @@ exports[`Empty > renders with avatar correctly 1`] = `
 `;
 
 exports[`Empty > renders with body slot correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true"></span></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">Body slot</div>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">Body slot</div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Empty > renders with class correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default gap-6">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true"></span></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default gap-6">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -74,10 +74,10 @@ exports[`Empty > renders with class correctly 1`] = `
 `;
 
 exports[`Empty > renders with description correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true"></span></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
   </div>
   <!--v-if-->
   <!--v-if-->
@@ -85,13 +85,13 @@ exports[`Empty > renders with description correctly 1`] = `
 `;
 
 exports[`Empty > renders with description slot correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true"></span></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-muted">Description slot</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description slot</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -100,25 +100,25 @@ exports[`Empty > renders with description slot correctly 1`] = `
 `;
 
 exports[`Empty > renders with footer slot correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true"></span></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
-  <div class="flex flex-col items-center gap-2 max-w-sm">Footer slot</div>
+  <div data-slot="footer" class="flex flex-col items-center gap-2 max-w-sm">Footer slot</div>
 </div>"
 `;
 
 exports[`Empty > renders with header slot correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center">Header slot</div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Add</span>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center">Header slot</div>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -127,8 +127,8 @@ exports[`Empty > renders with header slot correctly 1`] = `
 `;
 
 exports[`Empty > renders with icon correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -138,12 +138,12 @@ exports[`Empty > renders with icon correctly 1`] = `
 `;
 
 exports[`Empty > renders with leading slot correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center">Leading slot<h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center">Leading slot<h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -152,13 +152,13 @@ exports[`Empty > renders with leading slot correctly 1`] = `
 `;
 
 exports[`Empty > renders with primary variant naked correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true"></span></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -167,13 +167,13 @@ exports[`Empty > renders with primary variant naked correctly 1`] = `
 `;
 
 exports[`Empty > renders with primary variant outline correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true"></span></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -182,13 +182,13 @@ exports[`Empty > renders with primary variant outline correctly 1`] = `
 `;
 
 exports[`Empty > renders with primary variant soft correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-elevated/50">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true"></span></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-toned">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-elevated/50">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-toned">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -197,13 +197,13 @@ exports[`Empty > renders with primary variant soft correctly 1`] = `
 `;
 
 exports[`Empty > renders with primary variant solid correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-inverted">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true"></span></span>
-    <h2 class="text-pretty font-medium text-base text-inverted">Title</h2>
-    <div class="text-balance text-center text-sm text-dimmed">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-inverted">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
+    <h2 data-slot="title" class="text-pretty font-medium text-base text-inverted">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-dimmed">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -212,13 +212,13 @@ exports[`Empty > renders with primary variant solid correctly 1`] = `
 `;
 
 exports[`Empty > renders with primary variant subtle correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-elevated/50 ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true"></span></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-toned">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-elevated/50 ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-toned">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -227,13 +227,13 @@ exports[`Empty > renders with primary variant subtle correctly 1`] = `
 `;
 
 exports[`Empty > renders with size lg correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-11 text-[22px]"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true"></span></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-11 text-[22px]"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -242,13 +242,13 @@ exports[`Empty > renders with size lg correctly 1`] = `
 `;
 
 exports[`Empty > renders with size md correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true"></span></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -257,13 +257,13 @@ exports[`Empty > renders with size md correctly 1`] = `
 `;
 
 exports[`Empty > renders with size sm correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-9 text-lg"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true"></span></span>
-    <h2 class="text-highlighted text-pretty font-medium text-sm">Title</h2>
-    <div class="text-balance text-center text-xs text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-9 text-lg"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-sm">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-xs text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-4" aria-hidden="true"></span><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -272,13 +272,13 @@ exports[`Empty > renders with size sm correctly 1`] = `
 `;
 
 exports[`Empty > renders with size xl correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-12 text-2xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true"></span></span>
-    <h2 class="text-highlighted text-pretty font-medium text-lg">Title</h2>
-    <div class="text-balance text-center text-base text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-12 text-2xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-lg">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-base text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-6" aria-hidden="true"></span><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -287,13 +287,13 @@ exports[`Empty > renders with size xl correctly 1`] = `
 `;
 
 exports[`Empty > renders with size xs correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-8 text-base"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true"></span></span>
-    <h2 class="text-highlighted text-pretty font-medium text-sm">Title</h2>
-    <div class="text-balance text-center text-xs text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-8 text-base"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-sm">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-xs text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-4" aria-hidden="true"></span><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -302,9 +302,9 @@ exports[`Empty > renders with size xs correctly 1`] = `
 `;
 
 exports[`Empty > renders with title correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true"></span></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -313,13 +313,13 @@ exports[`Empty > renders with title correctly 1`] = `
 `;
 
 exports[`Empty > renders with title slot correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true"></span></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title slot</h2>
-    <div class="text-balance text-center text-sm text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title slot</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
@@ -328,13 +328,13 @@ exports[`Empty > renders with title slot correctly 1`] = `
 `;
 
 exports[`Empty > renders with ui correctly 1`] = `
-"<div class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
-  <div class="flex flex-col items-center gap-2 max-w-sm text-center"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true"></span></span>
-    <h2 class="text-highlighted text-pretty font-medium text-base">Title</h2>
-    <div class="text-balance text-center text-sm text-muted">Description</div>
+"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
+  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><span class="iconify i-lucide:file text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
+    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
+    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
   </div>
-  <div class="flex flex-col items-center gap-4 max-w-sm">
-    <div class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Add</span>
+  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
+    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Add</span>
         <!--v-if-->
       </button></div>
   </div>
diff --git a/test/components/__snapshots__/Error-vue.spec.ts.snap b/test/components/__snapshots__/Error-vue.spec.ts.snap
index 4efff69bdb..c803bffbde 100644
--- a/test/components/__snapshots__/Error-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Error-vue.spec.ts.snap
@@ -1,129 +1,129 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Error > renders with as correctly 1`] = `
-"<main class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
-  <p class="text-base font-semibold text-primary">404</p>
-  <h1 class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
-  <p class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
-  <div class="mt-8 flex items-center justify-center gap-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Back to home</span>
+"<main data-slot="root" class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
+  <p data-slot="statusCode" class="text-base font-semibold text-primary">404</p>
+  <h1 data-slot="statusMessage" class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
+  <p data-slot="message" class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
+  <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
     </button></div>
 </main>"
 `;
 
 exports[`Error > renders with class correctly 1`] = `
-"<div class="flex flex-col items-center justify-center text-center min-h-full">
-  <p class="text-base font-semibold text-primary">404</p>
-  <h1 class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
-  <p class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
-  <div class="mt-8 flex items-center justify-center gap-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Back to home</span>
+"<div data-slot="root" class="flex flex-col items-center justify-center text-center min-h-full">
+  <p data-slot="statusCode" class="text-base font-semibold text-primary">404</p>
+  <h1 data-slot="statusMessage" class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
+  <p data-slot="message" class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
+  <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
     </button></div>
 </div>"
 `;
 
 exports[`Error > renders with clear correctly 1`] = `
-"<div class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
-  <p class="text-base font-semibold text-primary">404</p>
-  <h1 class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
-  <p class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
-  <div class="mt-8 flex items-center justify-center gap-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Home</span>
+"<div data-slot="root" class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
+  <p data-slot="statusCode" class="text-base font-semibold text-primary">404</p>
+  <h1 data-slot="statusMessage" class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
+  <p data-slot="message" class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
+  <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Home</span>
       <!--v-if-->
     </button></div>
 </div>"
 `;
 
 exports[`Error > renders with default slot correctly 1`] = `
-"<div class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
-  <p class="text-base font-semibold text-primary">404</p>
-  <h1 class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
-  <p class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
-  <div class="mt-8 flex items-center justify-center gap-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Back to home</span>
+"<div data-slot="root" class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
+  <p data-slot="statusCode" class="text-base font-semibold text-primary">404</p>
+  <h1 data-slot="statusMessage" class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
+  <p data-slot="message" class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
+  <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
     </button></div>
 </div>"
 `;
 
 exports[`Error > renders with error correctly 1`] = `
-"<div class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
-  <p class="text-base font-semibold text-primary">404</p>
-  <h1 class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
-  <p class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
-  <div class="mt-8 flex items-center justify-center gap-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Back to home</span>
+"<div data-slot="root" class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
+  <p data-slot="statusCode" class="text-base font-semibold text-primary">404</p>
+  <h1 data-slot="statusMessage" class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
+  <p data-slot="message" class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
+  <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
     </button></div>
 </div>"
 `;
 
 exports[`Error > renders with links slot correctly 1`] = `
-"<div class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
-  <p class="text-base font-semibold text-primary">404</p>
-  <h1 class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
-  <p class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
-  <div class="mt-8 flex items-center justify-center gap-6">Links slot</div>
+"<div data-slot="root" class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
+  <p data-slot="statusCode" class="text-base font-semibold text-primary">404</p>
+  <h1 data-slot="statusMessage" class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
+  <p data-slot="message" class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
+  <div data-slot="links" class="mt-8 flex items-center justify-center gap-6">Links slot</div>
 </div>"
 `;
 
 exports[`Error > renders with message slot correctly 1`] = `
-"<div class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
-  <p class="text-base font-semibold text-primary">404</p>
-  <h1 class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
-  <p class="mt-4 text-lg text-muted text-balance">Message slot</p>
-  <div class="mt-8 flex items-center justify-center gap-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Back to home</span>
+"<div data-slot="root" class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
+  <p data-slot="statusCode" class="text-base font-semibold text-primary">404</p>
+  <h1 data-slot="statusMessage" class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
+  <p data-slot="message" class="mt-4 text-lg text-muted text-balance">Message slot</p>
+  <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
     </button></div>
 </div>"
 `;
 
 exports[`Error > renders with redirect correctly 1`] = `
-"<div class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
-  <p class="text-base font-semibold text-primary">404</p>
-  <h1 class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
-  <p class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
-  <div class="mt-8 flex items-center justify-center gap-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Back to home</span>
+"<div data-slot="root" class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
+  <p data-slot="statusCode" class="text-base font-semibold text-primary">404</p>
+  <h1 data-slot="statusMessage" class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
+  <p data-slot="message" class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
+  <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
     </button></div>
 </div>"
 `;
 
 exports[`Error > renders with statusCode slot correctly 1`] = `
-"<div class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
-  <p class="text-base font-semibold text-primary">Status code slot</p>
-  <h1 class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
-  <p class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
-  <div class="mt-8 flex items-center justify-center gap-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Back to home</span>
+"<div data-slot="root" class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
+  <p data-slot="statusCode" class="text-base font-semibold text-primary">Status code slot</p>
+  <h1 data-slot="statusMessage" class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
+  <p data-slot="message" class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
+  <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
     </button></div>
 </div>"
 `;
 
 exports[`Error > renders with statusMessage slot correctly 1`] = `
-"<div class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
-  <p class="text-base font-semibold text-primary">404</p>
-  <h1 class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Status message slot</h1>
-  <p class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
-  <div class="mt-8 flex items-center justify-center gap-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Back to home</span>
+"<div data-slot="root" class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
+  <p data-slot="statusCode" class="text-base font-semibold text-primary">404</p>
+  <h1 data-slot="statusMessage" class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Status message slot</h1>
+  <p data-slot="message" class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
+  <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
     </button></div>
 </div>"
 `;
 
 exports[`Error > renders with ui correctly 1`] = `
-"<div class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
-  <p class="text-base font-semibold text-primary">404</p>
-  <h1 class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
-  <p class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
-  <div class="flex items-center justify-center gap-6 mt-16"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Back to home</span>
+"<div data-slot="root" class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
+  <p data-slot="statusCode" class="text-base font-semibold text-primary">404</p>
+  <h1 data-slot="statusMessage" class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
+  <p data-slot="message" class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
+  <div data-slot="links" class="flex items-center justify-center gap-6 mt-16"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
     </button></div>
 </div>"
diff --git a/test/components/__snapshots__/Error.spec.ts.snap b/test/components/__snapshots__/Error.spec.ts.snap
index 4efff69bdb..c803bffbde 100644
--- a/test/components/__snapshots__/Error.spec.ts.snap
+++ b/test/components/__snapshots__/Error.spec.ts.snap
@@ -1,129 +1,129 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Error > renders with as correctly 1`] = `
-"<main class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
-  <p class="text-base font-semibold text-primary">404</p>
-  <h1 class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
-  <p class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
-  <div class="mt-8 flex items-center justify-center gap-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Back to home</span>
+"<main data-slot="root" class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
+  <p data-slot="statusCode" class="text-base font-semibold text-primary">404</p>
+  <h1 data-slot="statusMessage" class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
+  <p data-slot="message" class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
+  <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
     </button></div>
 </main>"
 `;
 
 exports[`Error > renders with class correctly 1`] = `
-"<div class="flex flex-col items-center justify-center text-center min-h-full">
-  <p class="text-base font-semibold text-primary">404</p>
-  <h1 class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
-  <p class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
-  <div class="mt-8 flex items-center justify-center gap-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Back to home</span>
+"<div data-slot="root" class="flex flex-col items-center justify-center text-center min-h-full">
+  <p data-slot="statusCode" class="text-base font-semibold text-primary">404</p>
+  <h1 data-slot="statusMessage" class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
+  <p data-slot="message" class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
+  <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
     </button></div>
 </div>"
 `;
 
 exports[`Error > renders with clear correctly 1`] = `
-"<div class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
-  <p class="text-base font-semibold text-primary">404</p>
-  <h1 class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
-  <p class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
-  <div class="mt-8 flex items-center justify-center gap-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Home</span>
+"<div data-slot="root" class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
+  <p data-slot="statusCode" class="text-base font-semibold text-primary">404</p>
+  <h1 data-slot="statusMessage" class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
+  <p data-slot="message" class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
+  <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Home</span>
       <!--v-if-->
     </button></div>
 </div>"
 `;
 
 exports[`Error > renders with default slot correctly 1`] = `
-"<div class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
-  <p class="text-base font-semibold text-primary">404</p>
-  <h1 class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
-  <p class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
-  <div class="mt-8 flex items-center justify-center gap-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Back to home</span>
+"<div data-slot="root" class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
+  <p data-slot="statusCode" class="text-base font-semibold text-primary">404</p>
+  <h1 data-slot="statusMessage" class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
+  <p data-slot="message" class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
+  <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
     </button></div>
 </div>"
 `;
 
 exports[`Error > renders with error correctly 1`] = `
-"<div class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
-  <p class="text-base font-semibold text-primary">404</p>
-  <h1 class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
-  <p class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
-  <div class="mt-8 flex items-center justify-center gap-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Back to home</span>
+"<div data-slot="root" class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
+  <p data-slot="statusCode" class="text-base font-semibold text-primary">404</p>
+  <h1 data-slot="statusMessage" class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
+  <p data-slot="message" class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
+  <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
     </button></div>
 </div>"
 `;
 
 exports[`Error > renders with links slot correctly 1`] = `
-"<div class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
-  <p class="text-base font-semibold text-primary">404</p>
-  <h1 class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
-  <p class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
-  <div class="mt-8 flex items-center justify-center gap-6">Links slot</div>
+"<div data-slot="root" class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
+  <p data-slot="statusCode" class="text-base font-semibold text-primary">404</p>
+  <h1 data-slot="statusMessage" class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
+  <p data-slot="message" class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
+  <div data-slot="links" class="mt-8 flex items-center justify-center gap-6">Links slot</div>
 </div>"
 `;
 
 exports[`Error > renders with message slot correctly 1`] = `
-"<div class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
-  <p class="text-base font-semibold text-primary">404</p>
-  <h1 class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
-  <p class="mt-4 text-lg text-muted text-balance">Message slot</p>
-  <div class="mt-8 flex items-center justify-center gap-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Back to home</span>
+"<div data-slot="root" class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
+  <p data-slot="statusCode" class="text-base font-semibold text-primary">404</p>
+  <h1 data-slot="statusMessage" class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
+  <p data-slot="message" class="mt-4 text-lg text-muted text-balance">Message slot</p>
+  <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
     </button></div>
 </div>"
 `;
 
 exports[`Error > renders with redirect correctly 1`] = `
-"<div class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
-  <p class="text-base font-semibold text-primary">404</p>
-  <h1 class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
-  <p class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
-  <div class="mt-8 flex items-center justify-center gap-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Back to home</span>
+"<div data-slot="root" class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
+  <p data-slot="statusCode" class="text-base font-semibold text-primary">404</p>
+  <h1 data-slot="statusMessage" class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
+  <p data-slot="message" class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
+  <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
     </button></div>
 </div>"
 `;
 
 exports[`Error > renders with statusCode slot correctly 1`] = `
-"<div class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
-  <p class="text-base font-semibold text-primary">Status code slot</p>
-  <h1 class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
-  <p class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
-  <div class="mt-8 flex items-center justify-center gap-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Back to home</span>
+"<div data-slot="root" class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
+  <p data-slot="statusCode" class="text-base font-semibold text-primary">Status code slot</p>
+  <h1 data-slot="statusMessage" class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
+  <p data-slot="message" class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
+  <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
     </button></div>
 </div>"
 `;
 
 exports[`Error > renders with statusMessage slot correctly 1`] = `
-"<div class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
-  <p class="text-base font-semibold text-primary">404</p>
-  <h1 class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Status message slot</h1>
-  <p class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
-  <div class="mt-8 flex items-center justify-center gap-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Back to home</span>
+"<div data-slot="root" class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
+  <p data-slot="statusCode" class="text-base font-semibold text-primary">404</p>
+  <h1 data-slot="statusMessage" class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Status message slot</h1>
+  <p data-slot="message" class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
+  <div data-slot="links" class="mt-8 flex items-center justify-center gap-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
     </button></div>
 </div>"
 `;
 
 exports[`Error > renders with ui correctly 1`] = `
-"<div class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
-  <p class="text-base font-semibold text-primary">404</p>
-  <h1 class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
-  <p class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
-  <div class="flex items-center justify-center gap-6 mt-16"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Back to home</span>
+"<div data-slot="root" class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
+  <p data-slot="statusCode" class="text-base font-semibold text-primary">404</p>
+  <h1 data-slot="statusMessage" class="mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance">Not Found</h1>
+  <p data-slot="message" class="mt-4 text-lg text-muted text-balance">The page you are looking for does not exist.</p>
+  <div data-slot="links" class="flex items-center justify-center gap-6 mt-16"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Back to home</span>
       <!--v-if-->
     </button></div>
 </div>"
diff --git a/test/components/__snapshots__/FieldGroup-vue.spec.ts.snap b/test/components/__snapshots__/FieldGroup-vue.spec.ts.snap
index e48ef31a93..303a94870f 100644
--- a/test/components/__snapshots__/FieldGroup-vue.spec.ts.snap
+++ b/test/components/__snapshots__/FieldGroup-vue.spec.ts.snap
@@ -2,10 +2,10 @@
 
 exports[`FieldGroup > renders orientation vertical with default slot correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex flex-col -space-y-px">
-  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+  <div data-slot="root" class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>
@@ -18,10 +18,10 @@ exports[`FieldGroup > renders with class correctly 1`] = `"<div data-orientation
 
 exports[`FieldGroup > renders with default slot correctly 1`] = `
 "<div data-orientation="horizontal" class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+  <div data-slot="root" class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>
@@ -30,10 +30,10 @@ exports[`FieldGroup > renders with default slot correctly 1`] = `
 
 exports[`FieldGroup > renders with size lg correctly 1`] = `
 "<div data-orientation="horizontal" class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+  <div data-slot="root" class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>
@@ -42,10 +42,10 @@ exports[`FieldGroup > renders with size lg correctly 1`] = `
 
 exports[`FieldGroup > renders with size md correctly 1`] = `
 "<div data-orientation="horizontal" class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+  <div data-slot="root" class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>
@@ -54,10 +54,10 @@ exports[`FieldGroup > renders with size md correctly 1`] = `
 
 exports[`FieldGroup > renders with size sm correctly 1`] = `
 "<div data-orientation="horizontal" class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+  <div data-slot="root" class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>
@@ -66,10 +66,10 @@ exports[`FieldGroup > renders with size sm correctly 1`] = `
 
 exports[`FieldGroup > renders with size xl correctly 1`] = `
 "<div data-orientation="horizontal" class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+  <div data-slot="root" class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>
@@ -78,10 +78,10 @@ exports[`FieldGroup > renders with size xl correctly 1`] = `
 
 exports[`FieldGroup > renders with size xs correctly 1`] = `
 "<div data-orientation="horizontal" class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+  <div data-slot="root" class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>
diff --git a/test/components/__snapshots__/FieldGroup.spec.ts.snap b/test/components/__snapshots__/FieldGroup.spec.ts.snap
index e48ef31a93..303a94870f 100644
--- a/test/components/__snapshots__/FieldGroup.spec.ts.snap
+++ b/test/components/__snapshots__/FieldGroup.spec.ts.snap
@@ -2,10 +2,10 @@
 
 exports[`FieldGroup > renders orientation vertical with default slot correctly 1`] = `
 "<div data-orientation="vertical" class="relative flex flex-col -space-y-px">
-  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+  <div data-slot="root" class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>
@@ -18,10 +18,10 @@ exports[`FieldGroup > renders with class correctly 1`] = `"<div data-orientation
 
 exports[`FieldGroup > renders with default slot correctly 1`] = `
 "<div data-orientation="horizontal" class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+  <div data-slot="root" class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>
@@ -30,10 +30,10 @@ exports[`FieldGroup > renders with default slot correctly 1`] = `
 
 exports[`FieldGroup > renders with size lg correctly 1`] = `
 "<div data-orientation="horizontal" class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+  <div data-slot="root" class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>
@@ -42,10 +42,10 @@ exports[`FieldGroup > renders with size lg correctly 1`] = `
 
 exports[`FieldGroup > renders with size md correctly 1`] = `
 "<div data-orientation="horizontal" class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+  <div data-slot="root" class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>
@@ -54,10 +54,10 @@ exports[`FieldGroup > renders with size md correctly 1`] = `
 
 exports[`FieldGroup > renders with size sm correctly 1`] = `
 "<div data-orientation="horizontal" class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+  <div data-slot="root" class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>
@@ -66,10 +66,10 @@ exports[`FieldGroup > renders with size sm correctly 1`] = `
 
 exports[`FieldGroup > renders with size xl correctly 1`] = `
 "<div data-orientation="horizontal" class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+  <div data-slot="root" class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>
@@ -78,10 +78,10 @@ exports[`FieldGroup > renders with size xl correctly 1`] = `
 
 exports[`FieldGroup > renders with size xs correctly 1`] = `
 "<div data-orientation="horizontal" class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+  <div data-slot="root" class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </div> <button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>
diff --git a/test/components/__snapshots__/FileUpload-vue.spec.ts.snap b/test/components/__snapshots__/FileUpload-vue.spec.ts.snap
index 10f07c4e82..74a36478e3 100644
--- a/test/components/__snapshots__/FileUpload-vue.spec.ts.snap
+++ b/test/components/__snapshots__/FileUpload-vue.spec.ts.snap
@@ -1,10 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`FileUpload > renders with accept correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -15,20 +15,20 @@ exports[`FileUpload > renders with accept correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with actions slot correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
-      <div class="flex flex-wrap gap-1.5 shrink-0 mt-4">Actions slot</div>
+      <div data-slot="actions" class="flex flex-wrap gap-1.5 shrink-0 mt-4">Actions slot</div>
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -36,10 +36,10 @@ exports[`FileUpload > renders with actions slot correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with ariaLabel correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -50,10 +50,10 @@ exports[`FileUpload > renders with ariaLabel correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with as correctly 1`] = `
-"<section class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<section data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -64,10 +64,10 @@ exports[`FileUpload > renders with as correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with class correctly 1`] = `
-"<div class="relative flex flex-col w-full gap-4">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col w-full gap-4">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -77,15 +77,15 @@ exports[`FileUpload > renders with class correctly 1`] = `
 </div>"
 `;
 
-exports[`FileUpload > renders with default slot correctly 1`] = `"<div class="relative flex flex-col">Default slot<input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*"></div>"`;
+exports[`FileUpload > renders with default slot correctly 1`] = `"<div data-slot="root" class="relative flex flex-col">Default slot<input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*"></div>"`;
 
 exports[`FileUpload > renders with description correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
-      <div class="text-muted mt-1">SVG, PNG, JPG or GIF (max. 2MB)</div>
+      <div data-slot="description" class="text-muted mt-1">SVG, PNG, JPG or GIF (max. 2MB)</div>
       <!--v-if-->
     </div>
   </div>
@@ -94,20 +94,20 @@ exports[`FileUpload > renders with description correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with description slot correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
-      <div class="text-muted mt-1">Description slot</div>
+      <div data-slot="description" class="text-muted mt-1">Description slot</div>
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -115,10 +115,10 @@ exports[`FileUpload > renders with description slot correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with disabled correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 cursor-not-allowed opacity-75 focus-visible:outline-primary" tabindex="-1">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 cursor-not-allowed opacity-75 focus-visible:outline-primary" tabindex="-1">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -129,10 +129,10 @@ exports[`FileUpload > renders with disabled correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with disabled correctly 2`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 cursor-not-allowed opacity-75 focus-visible:outline-primary" tabindex="-1">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 cursor-not-allowed opacity-75 focus-visible:outline-primary" tabindex="-1">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -143,55 +143,55 @@ exports[`FileUpload > renders with disabled correctly 2`] = `
 `;
 
 exports[`FileUpload > renders with file slot correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0">File slot</div>
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0">File slot</div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
 </div>"
 `;
 
 exports[`FileUpload > renders with file-leading slot correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0">File leading slot<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0">File leading slot<div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button></div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
 </div>"
 `;
 
 exports[`FileUpload > renders with file-name slot correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">File name slot</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">File name slot</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -199,20 +199,20 @@ exports[`FileUpload > renders with file-name slot correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with file-size slot correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">File size slot</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">File size slot</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -220,38 +220,38 @@ exports[`FileUpload > renders with file-size slot correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with file-trailing slot correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div>File trailing slot
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div>File trailing slot
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
 </div>"
 `;
 
 exports[`FileUpload > renders with fileDelete correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -259,20 +259,20 @@ exports[`FileUpload > renders with fileDelete correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with fileDeleteIcon correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -280,20 +280,20 @@ exports[`FileUpload > renders with fileDeleteIcon correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with fileIcon correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -301,34 +301,34 @@ exports[`FileUpload > renders with fileIcon correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with files slot correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">Files slot</div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
+  <div data-slot="files" class="">Files slot</div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
 </div>"
 `;
 
 exports[`FileUpload > renders with files-bottom slot correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
     </div>
   </div>Files bottom slot<input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -336,19 +336,19 @@ exports[`FileUpload > renders with files-bottom slot correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with files-top slot correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
-  </div>Files top slot<div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  </div>Files top slot<div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -356,10 +356,10 @@ exports[`FileUpload > renders with files-top slot correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with icon correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -370,10 +370,10 @@ exports[`FileUpload > renders with icon correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with id correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -384,11 +384,11 @@ exports[`FileUpload > renders with id correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with label correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
-      <div class="font-medium text-default mt-2">Drop your image here</div>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
+      <div data-slot="label" class="font-medium text-default mt-2">Drop your image here</div>
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -398,20 +398,20 @@ exports[`FileUpload > renders with label correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with label slot correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
-      <div class="font-medium text-default mt-2">Label slot</div>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
+      <div data-slot="label" class="font-medium text-default mt-2">Label slot</div>
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -419,20 +419,20 @@ exports[`FileUpload > renders with label slot correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with layout grid correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -440,13 +440,13 @@ exports[`FileUpload > renders with layout grid correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with layout grid multiple correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
-    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
-      <div class="relative text-xs gap-1.5 p-0 aspect-square"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+    <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
+      <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
           <!--v-if-->
-          <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+          <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
         </button>
       </div>
     </div>
@@ -457,20 +457,20 @@ exports[`FileUpload > renders with layout grid multiple correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with layout list correctly 1`] = `
-"<div class="relative flex flex-col gap-2 items-start">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col gap-2 items-start">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="flex flex-col w-full gap-2">
-    <div class="relative text-xs px-2.5 py-1.5 gap-1.5 min-w-0 flex items-center border border-default rounded-md w-full"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex flex-col min-w-0"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5 ms-auto -me-1.5">
+  <div data-slot="files" class="flex flex-col w-full gap-2">
+    <div data-slot="file" class="relative text-xs px-2.5 py-1.5 gap-1.5 min-w-0 flex items-center border border-default rounded-md w-full"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex flex-col min-w-0"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5 ms-auto -me-1.5">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5"></svg>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -478,20 +478,20 @@ exports[`FileUpload > renders with layout list correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with layout list multiple correctly 1`] = `
-"<div class="relative flex flex-col gap-2 items-start">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col gap-2 items-start">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="flex flex-col w-full gap-2">
-    <div class="relative text-xs px-2.5 py-1.5 gap-1.5 min-w-0 flex items-center border border-default rounded-md w-full"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex flex-col min-w-0"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5 ms-auto -me-1.5">
+  <div data-slot="files" class="flex flex-col w-full gap-2">
+    <div data-slot="file" class="relative text-xs px-2.5 py-1.5 gap-1.5 min-w-0 flex items-center border border-default rounded-md w-full"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex flex-col min-w-0"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5 ms-auto -me-1.5">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5"></svg>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*" multiple="">
@@ -499,20 +499,20 @@ exports[`FileUpload > renders with layout list multiple correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with leading slot correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3">Leading slot
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3">Leading slot
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -520,20 +520,20 @@ exports[`FileUpload > renders with leading slot correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with modelValue correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -541,13 +541,13 @@ exports[`FileUpload > renders with modelValue correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with multiple correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
-    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
-      <div class="relative text-xs gap-1.5 p-0 aspect-square"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+    <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
+      <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
           <!--v-if-->
-          <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+          <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
         </button>
       </div>
     </div>
@@ -558,10 +558,10 @@ exports[`FileUpload > renders with multiple correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with name correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -572,10 +572,10 @@ exports[`FileUpload > renders with name correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with neutral color correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-inverted hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-inverted hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -586,13 +586,13 @@ exports[`FileUpload > renders with neutral color correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with position inside correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
-    <div class="">
-      <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+    <div data-slot="files" class="">
+      <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
           <!--v-if-->
-          <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+          <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
         </button>
       </div>
     </div>
@@ -603,13 +603,13 @@ exports[`FileUpload > renders with position inside correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with position inside multiple correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
-    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
-      <div class="relative text-xs gap-1.5 p-0 aspect-square"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+    <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
+      <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
           <!--v-if-->
-          <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+          <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
         </button>
       </div>
     </div>
@@ -620,20 +620,20 @@ exports[`FileUpload > renders with position inside multiple correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with position outside correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -641,13 +641,13 @@ exports[`FileUpload > renders with position outside correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with position outside multiple correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
-    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
-      <div class="relative text-xs gap-1.5 p-0 aspect-square"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+    <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
+      <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
           <!--v-if-->
-          <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+          <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
         </button>
       </div>
     </div>
@@ -658,10 +658,10 @@ exports[`FileUpload > renders with position outside multiple correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with required correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -672,10 +672,10 @@ exports[`FileUpload > renders with required correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with required correctly 2`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -686,20 +686,20 @@ exports[`FileUpload > renders with required correctly 2`] = `
 `;
 
 exports[`FileUpload > renders with size lg correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-9 text-lg shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-9 text-lg shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-sm gap-2 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-lg shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="36" height="36" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate text-xs">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-lg shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="36" height="36" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate text-xs">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -707,17 +707,17 @@ exports[`FileUpload > renders with size lg correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size lg variant button correctly 1`] = `
-"<div class="relative flex flex-col"><button type="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-2 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-2 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg>
       <!--v-if-->
     </div>
   </button>
-  <div class="">
-    <div class="text-sm gap-2 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-lg shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="36" height="36" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate text-xs">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-lg shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="36" height="36" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate text-xs">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -725,20 +725,20 @@ exports[`FileUpload > renders with size lg variant button correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size md correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -746,17 +746,17 @@ exports[`FileUpload > renders with size md correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size md variant button correctly 1`] = `
-"<div class="relative flex flex-col"><button type="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-1.5 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-1.5 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg>
       <!--v-if-->
     </div>
   </button>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -764,20 +764,20 @@ exports[`FileUpload > renders with size md variant button correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size sm correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-xs border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-xs border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-7 text-sm shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-7 text-sm shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-sm shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="28" height="28" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="min-w-0 flex-row gap-1 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-sm shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="28" height="28" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -785,17 +785,17 @@ exports[`FileUpload > renders with size sm correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size sm variant button correctly 1`] = `
-"<div class="relative flex flex-col"><button type="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-xs border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-1.5 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-xs border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-1.5 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-4"></svg>
       <!--v-if-->
     </div>
   </button>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-sm shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="28" height="28" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="min-w-0 flex-row gap-1 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-sm shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="28" height="28" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -803,20 +803,20 @@ exports[`FileUpload > renders with size sm variant button correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size xl correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-base border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-base border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-10 text-xl shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-10 text-xl shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-sm gap-2 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xl shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="40" height="40" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xl shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="40" height="40" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -824,17 +824,17 @@ exports[`FileUpload > renders with size xl correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size xl variant button correctly 1`] = `
-"<div class="relative flex flex-col"><button type="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-base border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-2 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-base border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-2 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-6"></svg>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-6"></svg>
       <!--v-if-->
     </div>
   </button>
-  <div class="">
-    <div class="text-sm gap-2 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xl shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="40" height="40" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xl shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="40" height="40" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -842,20 +842,20 @@ exports[`FileUpload > renders with size xl variant button correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size xs correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-xs border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-xs border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-6 text-xs shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-6 text-xs shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xs shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="min-w-0 flex-row gap-1 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xs shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="24" height="24" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -863,17 +863,17 @@ exports[`FileUpload > renders with size xs correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size xs variant button correctly 1`] = `
-"<div class="relative flex flex-col"><button type="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-xs border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-1 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-xs border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-1 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-4"></svg>
       <!--v-if-->
     </div>
   </button>
-  <div class="">
-    <div class="text-xs gap-1 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xs shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="min-w-0 flex-row gap-1 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xs shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="24" height="24" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -881,10 +881,10 @@ exports[`FileUpload > renders with size xs variant button correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with ui correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25 rounded-xl" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25 rounded-xl" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -895,20 +895,20 @@ exports[`FileUpload > renders with ui correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with variant area correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -916,17 +916,17 @@ exports[`FileUpload > renders with variant area correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with variant button correctly 1`] = `
-"<div class="relative flex flex-col"><button type="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-1.5 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-1.5 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg>
       <!--v-if-->
     </div>
   </button>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+        <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-4"></svg>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -934,10 +934,10 @@ exports[`FileUpload > renders with variant button correctly 1`] = `
 `;
 
 exports[`FileUpload > renders without dropzone correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -948,10 +948,10 @@ exports[`FileUpload > renders without dropzone correctly 1`] = `
 `;
 
 exports[`FileUpload > renders without interactive correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary" tabindex="-1">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary" tabindex="-1">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -962,10 +962,10 @@ exports[`FileUpload > renders without interactive correctly 1`] = `
 `;
 
 exports[`FileUpload > renders without preview correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
diff --git a/test/components/__snapshots__/FileUpload.spec.ts.snap b/test/components/__snapshots__/FileUpload.spec.ts.snap
index 19b9bd0136..07245c0c09 100644
--- a/test/components/__snapshots__/FileUpload.spec.ts.snap
+++ b/test/components/__snapshots__/FileUpload.spec.ts.snap
@@ -1,10 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`FileUpload > renders with accept correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -15,20 +15,20 @@ exports[`FileUpload > renders with accept correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with actions slot correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
-      <div class="flex flex-wrap gap-1.5 shrink-0 mt-4">Actions slot</div>
+      <div data-slot="actions" class="flex flex-wrap gap-1.5 shrink-0 mt-4">Actions slot</div>
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -36,10 +36,10 @@ exports[`FileUpload > renders with actions slot correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with ariaLabel correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -50,10 +50,10 @@ exports[`FileUpload > renders with ariaLabel correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with as correctly 1`] = `
-"<section class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<section data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -64,10 +64,10 @@ exports[`FileUpload > renders with as correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with class correctly 1`] = `
-"<div class="relative flex flex-col w-full gap-4">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col w-full gap-4">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -77,15 +77,15 @@ exports[`FileUpload > renders with class correctly 1`] = `
 </div>"
 `;
 
-exports[`FileUpload > renders with default slot correctly 1`] = `"<div class="relative flex flex-col">Default slot<input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*"></div>"`;
+exports[`FileUpload > renders with default slot correctly 1`] = `"<div data-slot="root" class="relative flex flex-col">Default slot<input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*"></div>"`;
 
 exports[`FileUpload > renders with description correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
-      <div class="text-muted mt-1">SVG, PNG, JPG or GIF (max. 2MB)</div>
+      <div data-slot="description" class="text-muted mt-1">SVG, PNG, JPG or GIF (max. 2MB)</div>
       <!--v-if-->
     </div>
   </div>
@@ -94,20 +94,20 @@ exports[`FileUpload > renders with description correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with description slot correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
-      <div class="text-muted mt-1">Description slot</div>
+      <div data-slot="description" class="text-muted mt-1">Description slot</div>
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -115,10 +115,10 @@ exports[`FileUpload > renders with description slot correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with disabled correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 cursor-not-allowed opacity-75 focus-visible:outline-primary" tabindex="-1">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 cursor-not-allowed opacity-75 focus-visible:outline-primary" tabindex="-1">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -129,10 +129,10 @@ exports[`FileUpload > renders with disabled correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with disabled correctly 2`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 cursor-not-allowed opacity-75 focus-visible:outline-primary" tabindex="-1">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 cursor-not-allowed opacity-75 focus-visible:outline-primary" tabindex="-1">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -143,55 +143,55 @@ exports[`FileUpload > renders with disabled correctly 2`] = `
 `;
 
 exports[`FileUpload > renders with file slot correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0">File slot</div>
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0">File slot</div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
 </div>"
 `;
 
 exports[`FileUpload > renders with file-leading slot correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0">File leading slot<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0">File leading slot<div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button></div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
 </div>"
 `;
 
 exports[`FileUpload > renders with file-name slot correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">File name slot</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">File name slot</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -199,20 +199,20 @@ exports[`FileUpload > renders with file-name slot correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with file-size slot correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">File size slot</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">File size slot</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -220,38 +220,38 @@ exports[`FileUpload > renders with file-size slot correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with file-trailing slot correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div>File trailing slot
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div>File trailing slot
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
 </div>"
 `;
 
 exports[`FileUpload > renders with fileDelete correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -259,20 +259,20 @@ exports[`FileUpload > renders with fileDelete correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with fileDeleteIcon correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:trash shrink-0 size-4" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:trash shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -280,20 +280,20 @@ exports[`FileUpload > renders with fileDeleteIcon correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with fileIcon correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -301,34 +301,34 @@ exports[`FileUpload > renders with fileIcon correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with files slot correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">Files slot</div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
+  <div data-slot="files" class="">Files slot</div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
 </div>"
 `;
 
 exports[`FileUpload > renders with files-bottom slot correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div>Files bottom slot<input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -336,19 +336,19 @@ exports[`FileUpload > renders with files-bottom slot correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with files-top slot correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
-  </div>Files top slot<div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  </div>Files top slot<div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -356,10 +356,10 @@ exports[`FileUpload > renders with files-top slot correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with icon correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:image text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:image text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -370,10 +370,10 @@ exports[`FileUpload > renders with icon correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with id correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -384,11 +384,11 @@ exports[`FileUpload > renders with id correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with label correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
-      <div class="font-medium text-default mt-2">Drop your image here</div>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-slot="label" class="font-medium text-default mt-2">Drop your image here</div>
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -398,20 +398,20 @@ exports[`FileUpload > renders with label correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with label slot correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
-      <div class="font-medium text-default mt-2">Label slot</div>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-slot="label" class="font-medium text-default mt-2">Label slot</div>
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -419,20 +419,20 @@ exports[`FileUpload > renders with label slot correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with layout grid correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -440,13 +440,13 @@ exports[`FileUpload > renders with layout grid correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with layout grid multiple correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
-    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
-      <div class="relative text-xs gap-1.5 p-0 aspect-square"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+    <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
+      <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
           <!--v-if-->
-          <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+          <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
         </button>
       </div>
     </div>
@@ -457,20 +457,20 @@ exports[`FileUpload > renders with layout grid multiple correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with layout list correctly 1`] = `
-"<div class="relative flex flex-col gap-2 items-start">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col gap-2 items-start">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="flex flex-col w-full gap-2">
-    <div class="relative text-xs px-2.5 py-1.5 gap-1.5 min-w-0 flex items-center border border-default rounded-md w-full"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex flex-col min-w-0"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5 ms-auto -me-1.5">
+  <div data-slot="files" class="flex flex-col w-full gap-2">
+    <div data-slot="file" class="relative text-xs px-2.5 py-1.5 gap-1.5 min-w-0 flex items-center border border-default rounded-md w-full"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex flex-col min-w-0"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5 ms-auto -me-1.5">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -478,20 +478,20 @@ exports[`FileUpload > renders with layout list correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with layout list multiple correctly 1`] = `
-"<div class="relative flex flex-col gap-2 items-start">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col gap-2 items-start">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="flex flex-col w-full gap-2">
-    <div class="relative text-xs px-2.5 py-1.5 gap-1.5 min-w-0 flex items-center border border-default rounded-md w-full"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex flex-col min-w-0"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5 ms-auto -me-1.5">
+  <div data-slot="files" class="flex flex-col w-full gap-2">
+    <div data-slot="file" class="relative text-xs px-2.5 py-1.5 gap-1.5 min-w-0 flex items-center border border-default rounded-md w-full"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex flex-col min-w-0"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5 ms-auto -me-1.5">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*" multiple="">
@@ -499,20 +499,20 @@ exports[`FileUpload > renders with layout list multiple correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with leading slot correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3">Leading slot
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3">Leading slot
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -520,20 +520,20 @@ exports[`FileUpload > renders with leading slot correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with modelValue correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -541,13 +541,13 @@ exports[`FileUpload > renders with modelValue correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with multiple correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
-    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
-      <div class="relative text-xs gap-1.5 p-0 aspect-square"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+    <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
+      <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
           <!--v-if-->
-          <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+          <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
         </button>
       </div>
     </div>
@@ -558,10 +558,10 @@ exports[`FileUpload > renders with multiple correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with name correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -572,10 +572,10 @@ exports[`FileUpload > renders with name correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with neutral color correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-inverted hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-inverted hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -586,13 +586,13 @@ exports[`FileUpload > renders with neutral color correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with position inside correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
-    <div class="">
-      <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+    <div data-slot="files" class="">
+      <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
           <!--v-if-->
-          <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+          <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
         </button>
       </div>
     </div>
@@ -603,13 +603,13 @@ exports[`FileUpload > renders with position inside correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with position inside multiple correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
-    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
-      <div class="relative text-xs gap-1.5 p-0 aspect-square"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+    <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
+      <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
           <!--v-if-->
-          <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+          <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
         </button>
       </div>
     </div>
@@ -620,20 +620,20 @@ exports[`FileUpload > renders with position inside multiple correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with position outside correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -641,13 +641,13 @@ exports[`FileUpload > renders with position outside correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with position outside multiple correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
-    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
-      <div class="relative text-xs gap-1.5 p-0 aspect-square"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-        <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+    <div data-slot="files" class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
+      <div data-slot="file" class="relative text-xs gap-1.5 p-0 aspect-square"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
           <!--v-if-->
-          <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+          <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
         </button>
       </div>
     </div>
@@ -658,10 +658,10 @@ exports[`FileUpload > renders with position outside multiple correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with required correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -672,10 +672,10 @@ exports[`FileUpload > renders with required correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with required correctly 2`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -686,20 +686,20 @@ exports[`FileUpload > renders with required correctly 2`] = `
 `;
 
 exports[`FileUpload > renders with size lg correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-9 text-lg shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-9 text-lg shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-sm gap-2 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-lg shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="36" height="36" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate text-xs">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-lg shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="36" height="36" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate text-xs">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -707,17 +707,17 @@ exports[`FileUpload > renders with size lg correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size lg variant button correctly 1`] = `
-"<div class="relative flex flex-col"><button type="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-2 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-2 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-5" aria-hidden="true" data-slot="icon"></span>
       <!--v-if-->
     </div>
   </button>
-  <div class="">
-    <div class="text-sm gap-2 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-lg shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="36" height="36" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate text-xs">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-lg shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="36" height="36" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate text-xs">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -725,20 +725,20 @@ exports[`FileUpload > renders with size lg variant button correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size md correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -746,17 +746,17 @@ exports[`FileUpload > renders with size md correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size md variant button correctly 1`] = `
-"<div class="relative flex flex-col"><button type="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-1.5 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-1.5 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-5" aria-hidden="true" data-slot="icon"></span>
       <!--v-if-->
     </div>
   </button>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -764,20 +764,20 @@ exports[`FileUpload > renders with size md variant button correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size sm correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-xs border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-xs border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-7 text-sm shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-7 text-sm shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-sm shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="28" height="28" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="min-w-0 flex-row gap-1 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-sm shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="28" height="28" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -785,17 +785,17 @@ exports[`FileUpload > renders with size sm correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size sm variant button correctly 1`] = `
-"<div class="relative flex flex-col"><button type="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-xs border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-1.5 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-xs border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-1.5 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-4" aria-hidden="true"></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-4" aria-hidden="true" data-slot="icon"></span>
       <!--v-if-->
     </div>
   </button>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-sm shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="28" height="28" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="min-w-0 flex-row gap-1 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-sm shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="28" height="28" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -803,20 +803,20 @@ exports[`FileUpload > renders with size sm variant button correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size xl correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-base border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-base border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-10 text-xl shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-10 text-xl shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-sm gap-2 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xl shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="40" height="40" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xl shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="40" height="40" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -824,17 +824,17 @@ exports[`FileUpload > renders with size xl correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size xl variant button correctly 1`] = `
-"<div class="relative flex flex-col"><button type="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-base border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-2 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-base border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-2 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-6" aria-hidden="true"></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-6" aria-hidden="true" data-slot="icon"></span>
       <!--v-if-->
     </div>
   </button>
-  <div class="">
-    <div class="text-sm gap-2 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xl shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="40" height="40" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-sm gap-2 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xl shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="40" height="40" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -842,20 +842,20 @@ exports[`FileUpload > renders with size xl variant button correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size xs correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-xs border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-xs border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-6 text-xs shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-6 text-xs shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xs shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="min-w-0 flex-row gap-1 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xs shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="24" height="24" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -863,17 +863,17 @@ exports[`FileUpload > renders with size xs correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size xs variant button correctly 1`] = `
-"<div class="relative flex flex-col"><button type="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-xs border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-1 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-xs border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-1 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-4" aria-hidden="true"></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-4" aria-hidden="true" data-slot="icon"></span>
       <!--v-if-->
     </div>
   </button>
-  <div class="">
-    <div class="text-xs gap-1 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xs shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="min-w-0 flex-row gap-1 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xs shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="24" height="24" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="min-w-0 flex-row gap-1 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -881,10 +881,10 @@ exports[`FileUpload > renders with size xs variant button correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with ui correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25 rounded-xl" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25 rounded-xl" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -895,20 +895,20 @@ exports[`FileUpload > renders with ui correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with variant area correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -916,17 +916,17 @@ exports[`FileUpload > renders with variant area correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with variant button correctly 1`] = `
-"<div class="relative flex flex-col"><button type="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-1.5 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-1.5 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-5" aria-hidden="true" data-slot="icon"></span>
       <!--v-if-->
     </div>
   </button>
-  <div class="">
-    <div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
+  <div data-slot="files" class="">
+    <div data-slot="file" class="text-xs gap-1.5 absolute inset-0 p-0"><span data-slot="root" class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="fileWrapper" class="flex-col min-w-0 hidden"><span data-slot="fileName" class="text-default truncate">file.txt</span><span data-slot="fileSize" class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
         <!--v-if-->
-        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
+        <!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true" data-slot="trailingIcon"></span>
       </button>
     </div>
   </div><input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="file" accept="*">
@@ -934,10 +934,10 @@ exports[`FileUpload > renders with variant button correctly 1`] = `
 `;
 
 exports[`FileUpload > renders without dropzone correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -948,10 +948,10 @@ exports[`FileUpload > renders without dropzone correctly 1`] = `
 `;
 
 exports[`FileUpload > renders without interactive correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary" tabindex="-1">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary" tabindex="-1">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
@@ -962,10 +962,10 @@ exports[`FileUpload > renders without interactive correctly 1`] = `
 `;
 
 exports[`FileUpload > renders without preview correctly 1`] = `
-"<div class="relative flex flex-col">
-  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col">
+  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
-    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+    <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
diff --git a/test/components/__snapshots__/Footer-vue.spec.ts.snap b/test/components/__snapshots__/Footer-vue.spec.ts.snap
index 20fd265378..da30fe91ad 100644
--- a/test/components/__snapshots__/Footer-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Footer-vue.spec.ts.snap
@@ -1,96 +1,96 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Footer > renders with as correctly 1`] = `
-"<section class="">
+"<section data-slot="root" class="">
   <!--v-if-->
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3">
-    <div class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
-    <div class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
-    <div class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3" data-slot="container">
+    <div data-slot="right" class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
+    <div data-slot="center" class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
+    <div data-slot="left" class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
   </div>
   <!--v-if-->
 </section>"
 `;
 
 exports[`Footer > renders with bottom slot correctly 1`] = `
-"<footer class="">
+"<footer data-slot="root" class="">
   <!--v-if-->
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3">
-    <div class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
-    <div class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
-    <div class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3" data-slot="container">
+    <div data-slot="right" class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
+    <div data-slot="center" class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
+    <div data-slot="left" class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
   </div>
-  <div class="py-8 lg:py-12">Bottom slot</div>
+  <div data-slot="bottom" class="py-8 lg:py-12">Bottom slot</div>
 </footer>"
 `;
 
 exports[`Footer > renders with class correctly 1`] = `
-"<footer class="relative">
+"<footer data-slot="root" class="relative">
   <!--v-if-->
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3">
-    <div class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
-    <div class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
-    <div class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3" data-slot="container">
+    <div data-slot="right" class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
+    <div data-slot="center" class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
+    <div data-slot="left" class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
   </div>
   <!--v-if-->
 </footer>"
 `;
 
 exports[`Footer > renders with default slot correctly 1`] = `
-"<footer class="">
+"<footer data-slot="root" class="">
   <!--v-if-->
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3">
-    <div class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
-    <div class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center">Default slot</div>
-    <div class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3" data-slot="container">
+    <div data-slot="right" class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
+    <div data-slot="center" class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center">Default slot</div>
+    <div data-slot="left" class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
   </div>
   <!--v-if-->
 </footer>"
 `;
 
 exports[`Footer > renders with left slot correctly 1`] = `
-"<footer class="">
+"<footer data-slot="root" class="">
   <!--v-if-->
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3">
-    <div class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
-    <div class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
-    <div class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1">Left slot</div>
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3" data-slot="container">
+    <div data-slot="right" class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
+    <div data-slot="center" class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
+    <div data-slot="left" class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1">Left slot</div>
   </div>
   <!--v-if-->
 </footer>"
 `;
 
 exports[`Footer > renders with right slot correctly 1`] = `
-"<footer class="">
+"<footer data-slot="root" class="">
   <!--v-if-->
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3">
-    <div class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3">Right slot</div>
-    <div class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
-    <div class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3" data-slot="container">
+    <div data-slot="right" class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3">Right slot</div>
+    <div data-slot="center" class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
+    <div data-slot="left" class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
   </div>
   <!--v-if-->
 </footer>"
 `;
 
 exports[`Footer > renders with top slot correctly 1`] = `
-"<footer class="">
-  <div class="py-8 lg:py-12">Top slot</div>
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3">
-    <div class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
-    <div class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
-    <div class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
+"<footer data-slot="root" class="">
+  <div data-slot="top" class="py-8 lg:py-12">Top slot</div>
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3" data-slot="container">
+    <div data-slot="right" class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
+    <div data-slot="center" class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
+    <div data-slot="left" class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
   </div>
   <!--v-if-->
 </footer>"
 `;
 
 exports[`Footer > renders with ui correctly 1`] = `
-"<footer class="">
+"<footer data-slot="root" class="">
   <!--v-if-->
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-1.5">
-    <div class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
-    <div class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
-    <div class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-1.5" data-slot="container">
+    <div data-slot="right" class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
+    <div data-slot="center" class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
+    <div data-slot="left" class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
   </div>
   <!--v-if-->
 </footer>"
diff --git a/test/components/__snapshots__/Footer.spec.ts.snap b/test/components/__snapshots__/Footer.spec.ts.snap
index 20fd265378..da30fe91ad 100644
--- a/test/components/__snapshots__/Footer.spec.ts.snap
+++ b/test/components/__snapshots__/Footer.spec.ts.snap
@@ -1,96 +1,96 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Footer > renders with as correctly 1`] = `
-"<section class="">
+"<section data-slot="root" class="">
   <!--v-if-->
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3">
-    <div class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
-    <div class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
-    <div class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3" data-slot="container">
+    <div data-slot="right" class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
+    <div data-slot="center" class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
+    <div data-slot="left" class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
   </div>
   <!--v-if-->
 </section>"
 `;
 
 exports[`Footer > renders with bottom slot correctly 1`] = `
-"<footer class="">
+"<footer data-slot="root" class="">
   <!--v-if-->
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3">
-    <div class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
-    <div class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
-    <div class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3" data-slot="container">
+    <div data-slot="right" class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
+    <div data-slot="center" class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
+    <div data-slot="left" class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
   </div>
-  <div class="py-8 lg:py-12">Bottom slot</div>
+  <div data-slot="bottom" class="py-8 lg:py-12">Bottom slot</div>
 </footer>"
 `;
 
 exports[`Footer > renders with class correctly 1`] = `
-"<footer class="relative">
+"<footer data-slot="root" class="relative">
   <!--v-if-->
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3">
-    <div class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
-    <div class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
-    <div class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3" data-slot="container">
+    <div data-slot="right" class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
+    <div data-slot="center" class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
+    <div data-slot="left" class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
   </div>
   <!--v-if-->
 </footer>"
 `;
 
 exports[`Footer > renders with default slot correctly 1`] = `
-"<footer class="">
+"<footer data-slot="root" class="">
   <!--v-if-->
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3">
-    <div class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
-    <div class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center">Default slot</div>
-    <div class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3" data-slot="container">
+    <div data-slot="right" class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
+    <div data-slot="center" class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center">Default slot</div>
+    <div data-slot="left" class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
   </div>
   <!--v-if-->
 </footer>"
 `;
 
 exports[`Footer > renders with left slot correctly 1`] = `
-"<footer class="">
+"<footer data-slot="root" class="">
   <!--v-if-->
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3">
-    <div class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
-    <div class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
-    <div class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1">Left slot</div>
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3" data-slot="container">
+    <div data-slot="right" class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
+    <div data-slot="center" class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
+    <div data-slot="left" class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1">Left slot</div>
   </div>
   <!--v-if-->
 </footer>"
 `;
 
 exports[`Footer > renders with right slot correctly 1`] = `
-"<footer class="">
+"<footer data-slot="root" class="">
   <!--v-if-->
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3">
-    <div class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3">Right slot</div>
-    <div class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
-    <div class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3" data-slot="container">
+    <div data-slot="right" class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3">Right slot</div>
+    <div data-slot="center" class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
+    <div data-slot="left" class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
   </div>
   <!--v-if-->
 </footer>"
 `;
 
 exports[`Footer > renders with top slot correctly 1`] = `
-"<footer class="">
-  <div class="py-8 lg:py-12">Top slot</div>
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3">
-    <div class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
-    <div class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
-    <div class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
+"<footer data-slot="root" class="">
+  <div data-slot="top" class="py-8 lg:py-12">Top slot</div>
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3" data-slot="container">
+    <div data-slot="right" class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
+    <div data-slot="center" class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
+    <div data-slot="left" class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
   </div>
   <!--v-if-->
 </footer>"
 `;
 
 exports[`Footer > renders with ui correctly 1`] = `
-"<footer class="">
+"<footer data-slot="root" class="">
   <!--v-if-->
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-1.5">
-    <div class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
-    <div class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
-    <div class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-1.5" data-slot="container">
+    <div data-slot="right" class="lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"></div>
+    <div data-slot="center" class="mt-3 lg:mt-0 lg:order-2 flex items-center justify-center"></div>
+    <div data-slot="left" class="flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1"></div>
   </div>
   <!--v-if-->
 </footer>"
diff --git a/test/components/__snapshots__/FooterColumns-vue.spec.ts.snap b/test/components/__snapshots__/FooterColumns-vue.spec.ts.snap
index 13d0641f3a..9ac4045435 100644
--- a/test/components/__snapshots__/FooterColumns-vue.spec.ts.snap
+++ b/test/components/__snapshots__/FooterColumns-vue.spec.ts.snap
@@ -1,55 +1,55 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`FooterColumns > renders with as correctly 1`] = `
-"<section class="xl:grid xl:grid-cols-3 xl:gap-8">
+"<section data-slot="root" class="xl:grid xl:grid-cols-3 xl:gap-8">
   <!--v-if-->
-  <div class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
+  <div data-slot="center" class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
     <div>
-      <h3 class="text-sm font-semibold">Community</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://nuxters.nuxt.com" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Nuxters<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
-        <li class="relative"><a href="https://github.com/nuxt" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt on GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Community</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://nuxters.nuxt.com" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Nuxters<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
+        <li data-slot="item" class="relative"><a href="https://github.com/nuxt" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt on GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Documentation<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Design Kit<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Design Kit<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Enterprise</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Support<!--v-if--></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Enterprise</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Support<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Agencies<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Agencies<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Jobs<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Jobs<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Sponsors<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Sponsors<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Solutions</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://content.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Content<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Solutions</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://content.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Content<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><a href="https://devtools.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt DevTools<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+        <li data-slot="item" class="relative"><a href="https://devtools.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt DevTools<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><a href="https://image.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Image<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+        <li data-slot="item" class="relative"><a href="https://image.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Image<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><a href="https://ui.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt UI<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+        <li data-slot="item" class="relative"><a href="https://ui.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt UI<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
       </ul>
     </div>
@@ -59,55 +59,55 @@ exports[`FooterColumns > renders with as correctly 1`] = `
 `;
 
 exports[`FooterColumns > renders with class correctly 1`] = `
-"<nav class="xl:grid xl:grid-cols-3 xl:gap-8 px-10">
+"<nav data-slot="root" class="xl:grid xl:grid-cols-3 xl:gap-8 px-10">
   <!--v-if-->
-  <div class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
+  <div data-slot="center" class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
     <div>
-      <h3 class="text-sm font-semibold">Community</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://nuxters.nuxt.com" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Nuxters<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
-        <li class="relative"><a href="https://github.com/nuxt" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt on GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Community</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://nuxters.nuxt.com" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Nuxters<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
+        <li data-slot="item" class="relative"><a href="https://github.com/nuxt" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt on GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Documentation<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Design Kit<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Design Kit<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Enterprise</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Support<!--v-if--></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Enterprise</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Support<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Agencies<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Agencies<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Jobs<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Jobs<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Sponsors<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Sponsors<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Solutions</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://content.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Content<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Solutions</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://content.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Content<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><a href="https://devtools.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt DevTools<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+        <li data-slot="item" class="relative"><a href="https://devtools.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt DevTools<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><a href="https://image.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Image<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+        <li data-slot="item" class="relative"><a href="https://image.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Image<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><a href="https://ui.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt UI<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+        <li data-slot="item" class="relative"><a href="https://ui.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt UI<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
       </ul>
     </div>
@@ -117,55 +117,55 @@ exports[`FooterColumns > renders with class correctly 1`] = `
 `;
 
 exports[`FooterColumns > renders with column-label slot correctly 1`] = `
-"<nav class="xl:grid xl:grid-cols-3 xl:gap-8">
+"<nav data-slot="root" class="xl:grid xl:grid-cols-3 xl:gap-8">
   <!--v-if-->
-  <div class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
+  <div data-slot="center" class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
     <div>
-      <h3 class="text-sm font-semibold">Column label slot</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://nuxters.nuxt.com" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Nuxters<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
-        <li class="relative"><a href="https://github.com/nuxt" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt on GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Column label slot</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://nuxters.nuxt.com" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Nuxters<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
+        <li data-slot="item" class="relative"><a href="https://github.com/nuxt" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt on GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Documentation<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Design Kit<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Design Kit<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Column label slot</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Support<!--v-if--></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Column label slot</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Support<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Agencies<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Agencies<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Jobs<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Jobs<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Sponsors<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Sponsors<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Column label slot</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://content.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Content<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Column label slot</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://content.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Content<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><a href="https://devtools.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt DevTools<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+        <li data-slot="item" class="relative"><a href="https://devtools.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt DevTools<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><a href="https://image.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Image<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+        <li data-slot="item" class="relative"><a href="https://image.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Image<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><a href="https://ui.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt UI<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+        <li data-slot="item" class="relative"><a href="https://ui.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt UI<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
       </ul>
     </div>
@@ -175,55 +175,55 @@ exports[`FooterColumns > renders with column-label slot correctly 1`] = `
 `;
 
 exports[`FooterColumns > renders with columns correctly 1`] = `
-"<nav class="xl:grid xl:grid-cols-3 xl:gap-8">
+"<nav data-slot="root" class="xl:grid xl:grid-cols-3 xl:gap-8">
   <!--v-if-->
-  <div class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
+  <div data-slot="center" class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
     <div>
-      <h3 class="text-sm font-semibold">Community</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://nuxters.nuxt.com" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Nuxters<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
-        <li class="relative"><a href="https://github.com/nuxt" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt on GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Community</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://nuxters.nuxt.com" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Nuxters<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
+        <li data-slot="item" class="relative"><a href="https://github.com/nuxt" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt on GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Documentation<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Design Kit<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Design Kit<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Enterprise</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Support<!--v-if--></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Enterprise</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Support<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Agencies<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Agencies<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Jobs<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Jobs<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Sponsors<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Sponsors<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Solutions</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://content.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Content<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Solutions</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://content.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Content<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><a href="https://devtools.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt DevTools<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+        <li data-slot="item" class="relative"><a href="https://devtools.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt DevTools<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><a href="https://image.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Image<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+        <li data-slot="item" class="relative"><a href="https://image.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Image<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><a href="https://ui.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt UI<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+        <li data-slot="item" class="relative"><a href="https://ui.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt UI<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
       </ul>
     </div>
@@ -233,63 +233,63 @@ exports[`FooterColumns > renders with columns correctly 1`] = `
 `;
 
 exports[`FooterColumns > renders with default slot correctly 1`] = `
-"<nav class="xl:grid xl:grid-cols-3 xl:gap-8">
+"<nav data-slot="root" class="xl:grid xl:grid-cols-3 xl:gap-8">
   <!--v-if-->
-  <div class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">Default slot</div>
+  <div data-slot="center" class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">Default slot</div>
   <!--v-if-->
 </nav>"
 `;
 
 exports[`FooterColumns > renders with left slot correctly 1`] = `
-"<nav class="xl:grid xl:grid-cols-3 xl:gap-8">
-  <div class="mb-10 xl:mb-0">Left slot</div>
-  <div class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
+"<nav data-slot="root" class="xl:grid xl:grid-cols-3 xl:gap-8">
+  <div data-slot="left" class="mb-10 xl:mb-0">Left slot</div>
+  <div data-slot="center" class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
     <div>
-      <h3 class="text-sm font-semibold">Community</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://nuxters.nuxt.com" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Nuxters<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
-        <li class="relative"><a href="https://github.com/nuxt" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt on GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Community</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://nuxters.nuxt.com" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Nuxters<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
+        <li data-slot="item" class="relative"><a href="https://github.com/nuxt" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt on GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Documentation<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Design Kit<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Design Kit<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Enterprise</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Support<!--v-if--></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Enterprise</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Support<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Agencies<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Agencies<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Jobs<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Jobs<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Sponsors<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Sponsors<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Solutions</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://content.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Content<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Solutions</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://content.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Content<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><a href="https://devtools.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt DevTools<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+        <li data-slot="item" class="relative"><a href="https://devtools.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt DevTools<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><a href="https://image.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Image<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+        <li data-slot="item" class="relative"><a href="https://image.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Image<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><a href="https://ui.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt UI<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+        <li data-slot="item" class="relative"><a href="https://ui.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt UI<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
       </ul>
     </div>
@@ -299,34 +299,34 @@ exports[`FooterColumns > renders with left slot correctly 1`] = `
 `;
 
 exports[`FooterColumns > renders with link slot correctly 1`] = `
-"<nav class="xl:grid xl:grid-cols-3 xl:gap-8">
+"<nav data-slot="root" class="xl:grid xl:grid-cols-3 xl:gap-8">
   <!--v-if-->
-  <div class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
+  <div data-slot="center" class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
     <div>
-      <h3 class="text-sm font-semibold">Community</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://nuxters.nuxt.com" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
-        <li class="relative"><a href="https://github.com/nuxt" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</button></li>
+      <h3 data-slot="label" class="text-sm font-semibold">Community</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://nuxters.nuxt.com" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
+        <li data-slot="item" class="relative"><a href="https://github.com/nuxt" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</button></li>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Enterprise</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</button></li>
+      <h3 data-slot="label" class="text-sm font-semibold">Enterprise</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</button></li>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</button></li>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</button></li>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Solutions</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://content.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
-        <li class="relative"><a href="https://devtools.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
-        <li class="relative"><a href="https://image.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
-        <li class="relative"><a href="https://ui.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
+      <h3 data-slot="label" class="text-sm font-semibold">Solutions</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://content.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
+        <li data-slot="item" class="relative"><a href="https://devtools.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
+        <li data-slot="item" class="relative"><a href="https://image.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
+        <li data-slot="item" class="relative"><a href="https://ui.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
       </ul>
     </div>
   </div>
@@ -335,55 +335,55 @@ exports[`FooterColumns > renders with link slot correctly 1`] = `
 `;
 
 exports[`FooterColumns > renders with link-label slot correctly 1`] = `
-"<nav class="xl:grid xl:grid-cols-3 xl:gap-8">
+"<nav data-slot="root" class="xl:grid xl:grid-cols-3 xl:gap-8">
   <!--v-if-->
-  <div class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
+  <div data-slot="center" class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
     <div>
-      <h3 class="text-sm font-semibold">Community</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://nuxters.nuxt.com" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Link label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
-        <li class="relative"><a href="https://github.com/nuxt" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Link label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Community</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://nuxters.nuxt.com" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Link label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
+        <li data-slot="item" class="relative"><a href="https://github.com/nuxt" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Link label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Link label slot<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Link label slot<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Link label slot<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Link label slot<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Enterprise</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Link label slot<!--v-if--></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Enterprise</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Link label slot<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Link label slot<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Link label slot<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Link label slot<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Link label slot<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Link label slot<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Link label slot<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Solutions</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://content.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Link label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Solutions</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://content.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Link label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><a href="https://devtools.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Link label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+        <li data-slot="item" class="relative"><a href="https://devtools.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Link label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><a href="https://image.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Link label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+        <li data-slot="item" class="relative"><a href="https://image.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Link label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><a href="https://ui.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Link label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+        <li data-slot="item" class="relative"><a href="https://ui.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Link label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
       </ul>
     </div>
@@ -393,34 +393,34 @@ exports[`FooterColumns > renders with link-label slot correctly 1`] = `
 `;
 
 exports[`FooterColumns > renders with link-leading slot correctly 1`] = `
-"<nav class="xl:grid xl:grid-cols-3 xl:gap-8">
+"<nav data-slot="root" class="xl:grid xl:grid-cols-3 xl:gap-8">
   <!--v-if-->
-  <div class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
+  <div data-slot="center" class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
     <div>
-      <h3 class="text-sm font-semibold">Community</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://nuxters.nuxt.com" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Nuxters<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
-        <li class="relative"><a href="https://github.com/nuxt" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Nuxt on GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Documentation<!--v-if--></span></button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Design Kit<!--v-if--></span></button></li>
+      <h3 data-slot="label" class="text-sm font-semibold">Community</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://nuxters.nuxt.com" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Nuxters<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
+        <li data-slot="item" class="relative"><a href="https://github.com/nuxt" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Nuxt on GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span></button></li>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Design Kit<!--v-if--></span></button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Enterprise</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Support<!--v-if--></span></button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Agencies<!--v-if--></span></button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Jobs<!--v-if--></span></button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Sponsors<!--v-if--></span></button></li>
+      <h3 data-slot="label" class="text-sm font-semibold">Enterprise</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Support<!--v-if--></span></button></li>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Agencies<!--v-if--></span></button></li>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Jobs<!--v-if--></span></button></li>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Sponsors<!--v-if--></span></button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Solutions</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://content.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Nuxt Content<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
-        <li class="relative"><a href="https://devtools.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Nuxt DevTools<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
-        <li class="relative"><a href="https://image.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Nuxt Image<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
-        <li class="relative"><a href="https://ui.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Nuxt UI<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
+      <h3 data-slot="label" class="text-sm font-semibold">Solutions</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://content.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Nuxt Content<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
+        <li data-slot="item" class="relative"><a href="https://devtools.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Nuxt DevTools<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
+        <li data-slot="item" class="relative"><a href="https://image.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Nuxt Image<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
+        <li data-slot="item" class="relative"><a href="https://ui.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Nuxt UI<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
       </ul>
     </div>
   </div>
@@ -429,55 +429,55 @@ exports[`FooterColumns > renders with link-leading slot correctly 1`] = `
 `;
 
 exports[`FooterColumns > renders with link-trailing slot correctly 1`] = `
-"<nav class="xl:grid xl:grid-cols-3 xl:gap-8">
+"<nav data-slot="root" class="xl:grid xl:grid-cols-3 xl:gap-8">
   <!--v-if-->
-  <div class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
+  <div data-slot="center" class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
     <div>
-      <h3 class="text-sm font-semibold">Community</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://nuxters.nuxt.com" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Nuxters<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>Link trailing slot</a></li>
-        <li class="relative"><a href="https://github.com/nuxt" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt on GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>Link trailing slot
+      <h3 data-slot="label" class="text-sm font-semibold">Community</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://nuxters.nuxt.com" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Nuxters<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>Link trailing slot</a></li>
+        <li data-slot="item" class="relative"><a href="https://github.com/nuxt" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt on GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>Link trailing slot
           </a></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Documentation<!--v-if--></span>Link trailing slot
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>Link trailing slot
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Design Kit<!--v-if--></span>Link trailing slot
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Design Kit<!--v-if--></span>Link trailing slot
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Enterprise</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Support<!--v-if--></span>Link trailing slot
+      <h3 data-slot="label" class="text-sm font-semibold">Enterprise</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Support<!--v-if--></span>Link trailing slot
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Agencies<!--v-if--></span>Link trailing slot
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Agencies<!--v-if--></span>Link trailing slot
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Jobs<!--v-if--></span>Link trailing slot
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Jobs<!--v-if--></span>Link trailing slot
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Sponsors<!--v-if--></span>Link trailing slot
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Sponsors<!--v-if--></span>Link trailing slot
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Solutions</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://content.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Content<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>Link trailing slot
+      <h3 data-slot="label" class="text-sm font-semibold">Solutions</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://content.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Content<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>Link trailing slot
           </a></li>
-        <li class="relative"><a href="https://devtools.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt DevTools<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>Link trailing slot
+        <li data-slot="item" class="relative"><a href="https://devtools.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt DevTools<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>Link trailing slot
           </a></li>
-        <li class="relative"><a href="https://image.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Image<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>Link trailing slot
+        <li data-slot="item" class="relative"><a href="https://image.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Image<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>Link trailing slot
           </a></li>
-        <li class="relative"><a href="https://ui.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt UI<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>Link trailing slot
+        <li data-slot="item" class="relative"><a href="https://ui.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt UI<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>Link trailing slot
           </a></li>
       </ul>
     </div>
@@ -487,113 +487,113 @@ exports[`FooterColumns > renders with link-trailing slot correctly 1`] = `
 `;
 
 exports[`FooterColumns > renders with right slot correctly 1`] = `
-"<nav class="xl:grid xl:grid-cols-3 xl:gap-8">
+"<nav data-slot="root" class="xl:grid xl:grid-cols-3 xl:gap-8">
   <!--v-if-->
-  <div class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
+  <div data-slot="center" class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
     <div>
-      <h3 class="text-sm font-semibold">Community</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://nuxters.nuxt.com" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Nuxters<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
-        <li class="relative"><a href="https://github.com/nuxt" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt on GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Community</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://nuxters.nuxt.com" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Nuxters<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
+        <li data-slot="item" class="relative"><a href="https://github.com/nuxt" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt on GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Documentation<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Design Kit<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Design Kit<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Enterprise</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Support<!--v-if--></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Enterprise</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Support<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Agencies<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Agencies<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Jobs<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Jobs<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Sponsors<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Sponsors<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Solutions</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://content.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Content<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Solutions</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://content.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Content<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><a href="https://devtools.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt DevTools<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+        <li data-slot="item" class="relative"><a href="https://devtools.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt DevTools<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><a href="https://image.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Image<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+        <li data-slot="item" class="relative"><a href="https://image.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Image<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><a href="https://ui.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt UI<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+        <li data-slot="item" class="relative"><a href="https://ui.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt UI<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
       </ul>
     </div>
   </div>
-  <div class="mt-10 xl:mt-0">Right slot</div>
+  <div data-slot="right" class="mt-10 xl:mt-0">Right slot</div>
 </nav>"
 `;
 
 exports[`FooterColumns > renders with ui correctly 1`] = `
-"<nav class="xl:grid xl:grid-cols-3 xl:gap-8">
+"<nav data-slot="root" class="xl:grid xl:grid-cols-3 xl:gap-8">
   <!--v-if-->
-  <div class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
+  <div data-slot="center" class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
     <div>
-      <h3 class="text-sm font-semibold">Community</h3>
-      <ul class="mt-6 space-y-4 lg:gap-1.5">
-        <li class="relative"><a href="https://nuxters.nuxt.com" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Nuxters<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
-        <li class="relative"><a href="https://github.com/nuxt" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt on GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Community</h3>
+      <ul data-slot="list" class="mt-6 space-y-4 lg:gap-1.5">
+        <li data-slot="item" class="relative"><a href="https://nuxters.nuxt.com" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Nuxters<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span></a></li>
+        <li data-slot="item" class="relative"><a href="https://github.com/nuxt" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt on GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Documentation<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Design Kit<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Design Kit<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Enterprise</h3>
-      <ul class="mt-6 space-y-4 lg:gap-1.5">
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Support<!--v-if--></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Enterprise</h3>
+      <ul data-slot="list" class="mt-6 space-y-4 lg:gap-1.5">
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Support<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Agencies<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Agencies<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Jobs<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Jobs<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Sponsors<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Sponsors<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Solutions</h3>
-      <ul class="mt-6 space-y-4 lg:gap-1.5">
-        <li class="relative"><a href="https://content.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Content<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Solutions</h3>
+      <ul data-slot="list" class="mt-6 space-y-4 lg:gap-1.5">
+        <li data-slot="item" class="relative"><a href="https://content.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Content<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><a href="https://devtools.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt DevTools<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+        <li data-slot="item" class="relative"><a href="https://devtools.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt DevTools<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><a href="https://image.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Image<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+        <li data-slot="item" class="relative"><a href="https://image.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Image<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
-        <li class="relative"><a href="https://ui.nuxt.com/" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt UI<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
+        <li data-slot="item" class="relative"><a href="https://ui.nuxt.com/" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt UI<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed inline-block"></svg></span>
           </a></li>
       </ul>
     </div>
diff --git a/test/components/__snapshots__/FooterColumns.spec.ts.snap b/test/components/__snapshots__/FooterColumns.spec.ts.snap
index cc527ea69d..9fdb44352b 100644
--- a/test/components/__snapshots__/FooterColumns.spec.ts.snap
+++ b/test/components/__snapshots__/FooterColumns.spec.ts.snap
@@ -1,55 +1,55 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`FooterColumns > renders with as correctly 1`] = `
-"<section class="xl:grid xl:grid-cols-3 xl:gap-8">
+"<section data-slot="root" class="xl:grid xl:grid-cols-3 xl:gap-8">
   <!--v-if-->
-  <div class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
+  <div data-slot="center" class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
     <div>
-      <h3 class="text-sm font-semibold">Community</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://nuxters.nuxt.com" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:users size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Nuxters<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span></a></li>
-        <li class="relative"><a href="https://github.com/nuxt" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt on GitHub<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Community</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://nuxters.nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:users size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Nuxters<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
+        <li data-slot="item" class="relative"><a href="https://github.com/nuxt" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt on GitHub<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Documentation<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Design Kit<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Design Kit<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Enterprise</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Support<!--v-if--></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Enterprise</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Support<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Agencies<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Agencies<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Jobs<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Jobs<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Sponsors<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Sponsors<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Solutions</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://content.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Content<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Solutions</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://content.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Content<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><a href="https://devtools.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt DevTools<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+        <li data-slot="item" class="relative"><a href="https://devtools.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt DevTools<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><a href="https://image.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Image<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+        <li data-slot="item" class="relative"><a href="https://image.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Image<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><a href="https://ui.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt UI<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+        <li data-slot="item" class="relative"><a href="https://ui.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt UI<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
       </ul>
     </div>
@@ -59,55 +59,55 @@ exports[`FooterColumns > renders with as correctly 1`] = `
 `;
 
 exports[`FooterColumns > renders with class correctly 1`] = `
-"<nav class="xl:grid xl:grid-cols-3 xl:gap-8 px-10">
+"<nav data-slot="root" class="xl:grid xl:grid-cols-3 xl:gap-8 px-10">
   <!--v-if-->
-  <div class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
+  <div data-slot="center" class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
     <div>
-      <h3 class="text-sm font-semibold">Community</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://nuxters.nuxt.com" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:users size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Nuxters<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span></a></li>
-        <li class="relative"><a href="https://github.com/nuxt" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt on GitHub<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Community</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://nuxters.nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:users size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Nuxters<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
+        <li data-slot="item" class="relative"><a href="https://github.com/nuxt" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt on GitHub<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Documentation<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Design Kit<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Design Kit<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Enterprise</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Support<!--v-if--></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Enterprise</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Support<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Agencies<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Agencies<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Jobs<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Jobs<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Sponsors<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Sponsors<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Solutions</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://content.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Content<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Solutions</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://content.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Content<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><a href="https://devtools.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt DevTools<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+        <li data-slot="item" class="relative"><a href="https://devtools.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt DevTools<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><a href="https://image.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Image<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+        <li data-slot="item" class="relative"><a href="https://image.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Image<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><a href="https://ui.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt UI<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+        <li data-slot="item" class="relative"><a href="https://ui.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt UI<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
       </ul>
     </div>
@@ -117,55 +117,55 @@ exports[`FooterColumns > renders with class correctly 1`] = `
 `;
 
 exports[`FooterColumns > renders with column-label slot correctly 1`] = `
-"<nav class="xl:grid xl:grid-cols-3 xl:gap-8">
+"<nav data-slot="root" class="xl:grid xl:grid-cols-3 xl:gap-8">
   <!--v-if-->
-  <div class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
+  <div data-slot="center" class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
     <div>
-      <h3 class="text-sm font-semibold">Column label slot</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://nuxters.nuxt.com" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:users size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Nuxters<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span></a></li>
-        <li class="relative"><a href="https://github.com/nuxt" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt on GitHub<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Column label slot</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://nuxters.nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:users size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Nuxters<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
+        <li data-slot="item" class="relative"><a href="https://github.com/nuxt" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt on GitHub<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Documentation<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Design Kit<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Design Kit<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Column label slot</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Support<!--v-if--></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Column label slot</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Support<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Agencies<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Agencies<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Jobs<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Jobs<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Sponsors<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Sponsors<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Column label slot</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://content.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Content<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Column label slot</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://content.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Content<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><a href="https://devtools.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt DevTools<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+        <li data-slot="item" class="relative"><a href="https://devtools.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt DevTools<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><a href="https://image.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Image<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+        <li data-slot="item" class="relative"><a href="https://image.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Image<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><a href="https://ui.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt UI<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+        <li data-slot="item" class="relative"><a href="https://ui.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt UI<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
       </ul>
     </div>
@@ -175,55 +175,55 @@ exports[`FooterColumns > renders with column-label slot correctly 1`] = `
 `;
 
 exports[`FooterColumns > renders with columns correctly 1`] = `
-"<nav class="xl:grid xl:grid-cols-3 xl:gap-8">
+"<nav data-slot="root" class="xl:grid xl:grid-cols-3 xl:gap-8">
   <!--v-if-->
-  <div class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
+  <div data-slot="center" class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
     <div>
-      <h3 class="text-sm font-semibold">Community</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://nuxters.nuxt.com" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:users size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Nuxters<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span></a></li>
-        <li class="relative"><a href="https://github.com/nuxt" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt on GitHub<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Community</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://nuxters.nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:users size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Nuxters<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
+        <li data-slot="item" class="relative"><a href="https://github.com/nuxt" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt on GitHub<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Documentation<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Design Kit<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Design Kit<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Enterprise</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Support<!--v-if--></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Enterprise</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Support<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Agencies<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Agencies<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Jobs<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Jobs<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Sponsors<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Sponsors<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Solutions</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://content.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Content<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Solutions</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://content.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Content<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><a href="https://devtools.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt DevTools<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+        <li data-slot="item" class="relative"><a href="https://devtools.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt DevTools<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><a href="https://image.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Image<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+        <li data-slot="item" class="relative"><a href="https://image.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Image<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><a href="https://ui.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt UI<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+        <li data-slot="item" class="relative"><a href="https://ui.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt UI<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
       </ul>
     </div>
@@ -233,63 +233,63 @@ exports[`FooterColumns > renders with columns correctly 1`] = `
 `;
 
 exports[`FooterColumns > renders with default slot correctly 1`] = `
-"<nav class="xl:grid xl:grid-cols-3 xl:gap-8">
+"<nav data-slot="root" class="xl:grid xl:grid-cols-3 xl:gap-8">
   <!--v-if-->
-  <div class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">Default slot</div>
+  <div data-slot="center" class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">Default slot</div>
   <!--v-if-->
 </nav>"
 `;
 
 exports[`FooterColumns > renders with left slot correctly 1`] = `
-"<nav class="xl:grid xl:grid-cols-3 xl:gap-8">
-  <div class="mb-10 xl:mb-0">Left slot</div>
-  <div class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
+"<nav data-slot="root" class="xl:grid xl:grid-cols-3 xl:gap-8">
+  <div data-slot="left" class="mb-10 xl:mb-0">Left slot</div>
+  <div data-slot="center" class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
     <div>
-      <h3 class="text-sm font-semibold">Community</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://nuxters.nuxt.com" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:users size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Nuxters<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span></a></li>
-        <li class="relative"><a href="https://github.com/nuxt" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt on GitHub<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Community</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://nuxters.nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:users size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Nuxters<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
+        <li data-slot="item" class="relative"><a href="https://github.com/nuxt" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt on GitHub<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Documentation<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Design Kit<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Design Kit<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Enterprise</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Support<!--v-if--></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Enterprise</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Support<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Agencies<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Agencies<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Jobs<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Jobs<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Sponsors<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Sponsors<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Solutions</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://content.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Content<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Solutions</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://content.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Content<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><a href="https://devtools.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt DevTools<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+        <li data-slot="item" class="relative"><a href="https://devtools.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt DevTools<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><a href="https://image.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Image<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+        <li data-slot="item" class="relative"><a href="https://image.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Image<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><a href="https://ui.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt UI<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+        <li data-slot="item" class="relative"><a href="https://ui.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt UI<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
       </ul>
     </div>
@@ -299,34 +299,34 @@ exports[`FooterColumns > renders with left slot correctly 1`] = `
 `;
 
 exports[`FooterColumns > renders with link slot correctly 1`] = `
-"<nav class="xl:grid xl:grid-cols-3 xl:gap-8">
+"<nav data-slot="root" class="xl:grid xl:grid-cols-3 xl:gap-8">
   <!--v-if-->
-  <div class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
+  <div data-slot="center" class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
     <div>
-      <h3 class="text-sm font-semibold">Community</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://nuxters.nuxt.com" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
-        <li class="relative"><a href="https://github.com/nuxt" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</button></li>
+      <h3 data-slot="label" class="text-sm font-semibold">Community</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://nuxters.nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
+        <li data-slot="item" class="relative"><a href="https://github.com/nuxt" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</button></li>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Enterprise</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</button></li>
+      <h3 data-slot="label" class="text-sm font-semibold">Enterprise</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</button></li>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</button></li>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</button></li>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Solutions</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://content.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
-        <li class="relative"><a href="https://devtools.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
-        <li class="relative"><a href="https://image.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
-        <li class="relative"><a href="https://ui.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
+      <h3 data-slot="label" class="text-sm font-semibold">Solutions</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://content.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
+        <li data-slot="item" class="relative"><a href="https://devtools.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
+        <li data-slot="item" class="relative"><a href="https://image.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
+        <li data-slot="item" class="relative"><a href="https://ui.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
       </ul>
     </div>
   </div>
@@ -335,55 +335,55 @@ exports[`FooterColumns > renders with link slot correctly 1`] = `
 `;
 
 exports[`FooterColumns > renders with link-label slot correctly 1`] = `
-"<nav class="xl:grid xl:grid-cols-3 xl:gap-8">
+"<nav data-slot="root" class="xl:grid xl:grid-cols-3 xl:gap-8">
   <!--v-if-->
-  <div class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
+  <div data-slot="center" class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
     <div>
-      <h3 class="text-sm font-semibold">Community</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://nuxters.nuxt.com" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:users size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Link label slot<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span></a></li>
-        <li class="relative"><a href="https://github.com/nuxt" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Link label slot<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Community</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://nuxters.nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:users size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Link label slot<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
+        <li data-slot="item" class="relative"><a href="https://github.com/nuxt" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Link label slot<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Link label slot<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Link label slot<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Link label slot<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Link label slot<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Enterprise</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Link label slot<!--v-if--></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Enterprise</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Link label slot<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Link label slot<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Link label slot<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Link label slot<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Link label slot<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Link label slot<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Link label slot<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Solutions</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://content.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Link label slot<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Solutions</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://content.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Link label slot<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><a href="https://devtools.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Link label slot<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+        <li data-slot="item" class="relative"><a href="https://devtools.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Link label slot<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><a href="https://image.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Link label slot<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+        <li data-slot="item" class="relative"><a href="https://image.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Link label slot<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><a href="https://ui.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Link label slot<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+        <li data-slot="item" class="relative"><a href="https://ui.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Link label slot<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
       </ul>
     </div>
@@ -393,34 +393,34 @@ exports[`FooterColumns > renders with link-label slot correctly 1`] = `
 `;
 
 exports[`FooterColumns > renders with link-leading slot correctly 1`] = `
-"<nav class="xl:grid xl:grid-cols-3 xl:gap-8">
+"<nav data-slot="root" class="xl:grid xl:grid-cols-3 xl:gap-8">
   <!--v-if-->
-  <div class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
+  <div data-slot="center" class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
     <div>
-      <h3 class="text-sm font-semibold">Community</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://nuxters.nuxt.com" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Nuxters<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span></a></li>
-        <li class="relative"><a href="https://github.com/nuxt" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Nuxt on GitHub<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span></a></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Documentation<!--v-if--></span></button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Design Kit<!--v-if--></span></button></li>
+      <h3 data-slot="label" class="text-sm font-semibold">Community</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://nuxters.nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Nuxters<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
+        <li data-slot="item" class="relative"><a href="https://github.com/nuxt" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Nuxt on GitHub<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span></button></li>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Design Kit<!--v-if--></span></button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Enterprise</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Support<!--v-if--></span></button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Agencies<!--v-if--></span></button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Jobs<!--v-if--></span></button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Sponsors<!--v-if--></span></button></li>
+      <h3 data-slot="label" class="text-sm font-semibold">Enterprise</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Support<!--v-if--></span></button></li>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Agencies<!--v-if--></span></button></li>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Jobs<!--v-if--></span></button></li>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Sponsors<!--v-if--></span></button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Solutions</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://content.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Nuxt Content<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span></a></li>
-        <li class="relative"><a href="https://devtools.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Nuxt DevTools<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span></a></li>
-        <li class="relative"><a href="https://image.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Nuxt Image<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span></a></li>
-        <li class="relative"><a href="https://ui.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Nuxt UI<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span></a></li>
+      <h3 data-slot="label" class="text-sm font-semibold">Solutions</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://content.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Nuxt Content<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
+        <li data-slot="item" class="relative"><a href="https://devtools.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Nuxt DevTools<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
+        <li data-slot="item" class="relative"><a href="https://image.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Nuxt Image<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
+        <li data-slot="item" class="relative"><a href="https://ui.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Nuxt UI<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
       </ul>
     </div>
   </div>
@@ -429,55 +429,55 @@ exports[`FooterColumns > renders with link-leading slot correctly 1`] = `
 `;
 
 exports[`FooterColumns > renders with link-trailing slot correctly 1`] = `
-"<nav class="xl:grid xl:grid-cols-3 xl:gap-8">
+"<nav data-slot="root" class="xl:grid xl:grid-cols-3 xl:gap-8">
   <!--v-if-->
-  <div class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
+  <div data-slot="center" class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
     <div>
-      <h3 class="text-sm font-semibold">Community</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://nuxters.nuxt.com" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:users size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Nuxters<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>Link trailing slot</a></li>
-        <li class="relative"><a href="https://github.com/nuxt" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt on GitHub<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>Link trailing slot
+      <h3 data-slot="label" class="text-sm font-semibold">Community</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://nuxters.nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:users size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Nuxters<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>Link trailing slot</a></li>
+        <li data-slot="item" class="relative"><a href="https://github.com/nuxt" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt on GitHub<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>Link trailing slot
           </a></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Documentation<!--v-if--></span>Link trailing slot
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>Link trailing slot
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Design Kit<!--v-if--></span>Link trailing slot
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Design Kit<!--v-if--></span>Link trailing slot
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Enterprise</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Support<!--v-if--></span>Link trailing slot
+      <h3 data-slot="label" class="text-sm font-semibold">Enterprise</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Support<!--v-if--></span>Link trailing slot
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Agencies<!--v-if--></span>Link trailing slot
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Agencies<!--v-if--></span>Link trailing slot
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Jobs<!--v-if--></span>Link trailing slot
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Jobs<!--v-if--></span>Link trailing slot
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Sponsors<!--v-if--></span>Link trailing slot
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Sponsors<!--v-if--></span>Link trailing slot
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Solutions</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://content.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Content<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>Link trailing slot
+      <h3 data-slot="label" class="text-sm font-semibold">Solutions</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://content.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Content<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>Link trailing slot
           </a></li>
-        <li class="relative"><a href="https://devtools.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt DevTools<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>Link trailing slot
+        <li data-slot="item" class="relative"><a href="https://devtools.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt DevTools<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>Link trailing slot
           </a></li>
-        <li class="relative"><a href="https://image.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Image<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>Link trailing slot
+        <li data-slot="item" class="relative"><a href="https://image.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Image<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>Link trailing slot
           </a></li>
-        <li class="relative"><a href="https://ui.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt UI<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>Link trailing slot
+        <li data-slot="item" class="relative"><a href="https://ui.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt UI<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>Link trailing slot
           </a></li>
       </ul>
     </div>
@@ -487,113 +487,113 @@ exports[`FooterColumns > renders with link-trailing slot correctly 1`] = `
 `;
 
 exports[`FooterColumns > renders with right slot correctly 1`] = `
-"<nav class="xl:grid xl:grid-cols-3 xl:gap-8">
+"<nav data-slot="root" class="xl:grid xl:grid-cols-3 xl:gap-8">
   <!--v-if-->
-  <div class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
+  <div data-slot="center" class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
     <div>
-      <h3 class="text-sm font-semibold">Community</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://nuxters.nuxt.com" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:users size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Nuxters<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span></a></li>
-        <li class="relative"><a href="https://github.com/nuxt" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt on GitHub<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Community</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://nuxters.nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:users size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Nuxters<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
+        <li data-slot="item" class="relative"><a href="https://github.com/nuxt" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt on GitHub<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Documentation<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Design Kit<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Design Kit<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Enterprise</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Support<!--v-if--></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Enterprise</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Support<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Agencies<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Agencies<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Jobs<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Jobs<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Sponsors<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Sponsors<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Solutions</h3>
-      <ul class="mt-6 space-y-4">
-        <li class="relative"><a href="https://content.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Content<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Solutions</h3>
+      <ul data-slot="list" class="mt-6 space-y-4">
+        <li data-slot="item" class="relative"><a href="https://content.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Content<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><a href="https://devtools.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt DevTools<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+        <li data-slot="item" class="relative"><a href="https://devtools.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt DevTools<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><a href="https://image.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Image<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+        <li data-slot="item" class="relative"><a href="https://image.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Image<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><a href="https://ui.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt UI<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+        <li data-slot="item" class="relative"><a href="https://ui.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt UI<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
       </ul>
     </div>
   </div>
-  <div class="mt-10 xl:mt-0">Right slot</div>
+  <div data-slot="right" class="mt-10 xl:mt-0">Right slot</div>
 </nav>"
 `;
 
 exports[`FooterColumns > renders with ui correctly 1`] = `
-"<nav class="xl:grid xl:grid-cols-3 xl:gap-8">
+"<nav data-slot="root" class="xl:grid xl:grid-cols-3 xl:gap-8">
   <!--v-if-->
-  <div class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
+  <div data-slot="center" class="flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2">
     <div>
-      <h3 class="text-sm font-semibold">Community</h3>
-      <ul class="mt-6 space-y-4 lg:gap-1.5">
-        <li class="relative"><a href="https://nuxters.nuxt.com" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:users size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Nuxters<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span></a></li>
-        <li class="relative"><a href="https://github.com/nuxt" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt on GitHub<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Community</h3>
+      <ul data-slot="list" class="mt-6 space-y-4 lg:gap-1.5">
+        <li data-slot="item" class="relative"><a href="https://nuxters.nuxt.com" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:users size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Nuxters<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
+        <li data-slot="item" class="relative"><a href="https://github.com/nuxt" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt on GitHub<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Documentation<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Design Kit<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Design Kit<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Enterprise</h3>
-      <ul class="mt-6 space-y-4 lg:gap-1.5">
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Support<!--v-if--></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Enterprise</h3>
+      <ul data-slot="list" class="mt-6 space-y-4 lg:gap-1.5">
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Support<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Agencies<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Agencies<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Jobs<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Jobs<!--v-if--></span>
           </button></li>
-        <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Sponsors<!--v-if--></span>
+        <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Sponsors<!--v-if--></span>
           </button></li>
       </ul>
     </div>
     <div>
-      <h3 class="text-sm font-semibold">Solutions</h3>
-      <ul class="mt-6 space-y-4 lg:gap-1.5">
-        <li class="relative"><a href="https://content.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Content<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+      <h3 data-slot="label" class="text-sm font-semibold">Solutions</h3>
+      <ul data-slot="list" class="mt-6 space-y-4 lg:gap-1.5">
+        <li data-slot="item" class="relative"><a href="https://content.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Content<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><a href="https://devtools.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt DevTools<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+        <li data-slot="item" class="relative"><a href="https://devtools.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt DevTools<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><a href="https://image.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt Image<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+        <li data-slot="item" class="relative"><a href="https://image.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt Image<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
-        <li class="relative"><a href="https://ui.nuxt.com/" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
-            <!--v-if--><span class="truncate">Nuxt UI<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true"></span></span>
+        <li data-slot="item" class="relative"><a href="https://ui.nuxt.com/" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">
+            <!--v-if--><span data-slot="linkLabel" class="truncate">Nuxt UI<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed inline-block" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           </a></li>
       </ul>
     </div>
diff --git a/test/components/__snapshots__/Form-vue.spec.ts.snap b/test/components/__snapshots__/Form-vue.spec.ts.snap
index ec21bd68d4..9321000c16 100644
--- a/test/components/__snapshots__/Form-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Form-vue.spec.ts.snap
@@ -2,30 +2,30 @@
 
 exports[`Form > custom validation works > with error 1`] = `
 "<form id="42" class="">
-  <div class="text-sm" id="emailField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="emailField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="email" type="text" name="email" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
     </div>
   </div>
-  <div class="text-sm" id="passwordField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="passwordField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-1-error">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="password" type="text" name="password" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-1-error">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-1-error" data-slot="error" class="mt-2 text-error">Must be at least 8 characters</div>
     </div>
   </div>
 </form>"
@@ -33,26 +33,26 @@ exports[`Form > custom validation works > with error 1`] = `
 
 exports[`Form > custom validation works > without error 1`] = `
 "<form id="42" class="">
-  <div class="text-sm" id="emailField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="emailField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="email" type="text" name="email" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
     </div>
   </div>
-  <div class="text-sm" id="passwordField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="passwordField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="password" type="text" name="password" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -64,30 +64,30 @@ exports[`Form > custom validation works > without error 1`] = `
 
 exports[`Form > joi validation works > with error 1`] = `
 "<form id="42" class="">
-  <div class="text-sm" id="emailField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="emailField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="email" type="text" name="email" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
     </div>
   </div>
-  <div class="text-sm" id="passwordField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="passwordField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-1-error">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="password" type="text" name="password" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-1-error">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-1-error" data-slot="error" class="mt-2 text-error">Must be at least 8 characters</div>
     </div>
   </div>
 </form>"
@@ -95,26 +95,26 @@ exports[`Form > joi validation works > with error 1`] = `
 
 exports[`Form > joi validation works > without error 1`] = `
 "<form id="42" class="">
-  <div class="text-sm" id="emailField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="emailField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="email" type="text" name="email" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
     </div>
   </div>
-  <div class="text-sm" id="passwordField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="passwordField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="password" type="text" name="password" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -130,30 +130,30 @@ exports[`Form > renders with state correctly 1`] = `"<form id="v-0" class=""></f
 
 exports[`Form > superstruct validation works > with error 1`] = `
 "<form id="42" class="">
-  <div class="text-sm" id="emailField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="emailField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="email" type="text" name="email" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
     </div>
   </div>
-  <div class="text-sm" id="passwordField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="passwordField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-1-error">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="password" type="text" name="password" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-1-error">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-1-error" data-slot="error" class="mt-2 text-error">Must be at least 8 characters</div>
     </div>
   </div>
 </form>"
@@ -161,26 +161,26 @@ exports[`Form > superstruct validation works > with error 1`] = `
 
 exports[`Form > superstruct validation works > without error 1`] = `
 "<form id="42" class="">
-  <div class="text-sm" id="emailField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="emailField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="email" type="text" name="email" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
     </div>
   </div>
-  <div class="text-sm" id="passwordField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="passwordField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="password" type="text" name="password" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -192,30 +192,30 @@ exports[`Form > superstruct validation works > without error 1`] = `
 
 exports[`Form > valibot validation works > with error 1`] = `
 "<form id="42" class="">
-  <div class="text-sm" id="emailField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="emailField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="email" type="text" name="email" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
     </div>
   </div>
-  <div class="text-sm" id="passwordField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="passwordField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-1-error">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="password" type="text" name="password" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-1-error">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-1-error" data-slot="error" class="mt-2 text-error">Must be at least 8 characters</div>
     </div>
   </div>
 </form>"
@@ -223,26 +223,26 @@ exports[`Form > valibot validation works > with error 1`] = `
 
 exports[`Form > valibot validation works > without error 1`] = `
 "<form id="42" class="">
-  <div class="text-sm" id="emailField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="emailField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="email" type="text" name="email" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
     </div>
   </div>
-  <div class="text-sm" id="passwordField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="passwordField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="password" type="text" name="password" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -254,30 +254,30 @@ exports[`Form > valibot validation works > without error 1`] = `
 
 exports[`Form > yup validation works > with error 1`] = `
 "<form id="42" class="">
-  <div class="text-sm" id="emailField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="emailField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="email" type="text" name="email" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
     </div>
   </div>
-  <div class="text-sm" id="passwordField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="passwordField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-1-error">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="password" type="text" name="password" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-1-error">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-1-error" data-slot="error" class="mt-2 text-error">Must be at least 8 characters</div>
     </div>
   </div>
 </form>"
@@ -285,26 +285,26 @@ exports[`Form > yup validation works > with error 1`] = `
 
 exports[`Form > yup validation works > without error 1`] = `
 "<form id="42" class="">
-  <div class="text-sm" id="emailField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="emailField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="email" type="text" name="email" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
     </div>
   </div>
-  <div class="text-sm" id="passwordField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="passwordField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="password" type="text" name="password" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -316,30 +316,30 @@ exports[`Form > yup validation works > without error 1`] = `
 
 exports[`Form > zod validation works > with error 1`] = `
 "<form id="42" class="">
-  <div class="text-sm" id="emailField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="emailField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="email" type="text" name="email" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
     </div>
   </div>
-  <div class="text-sm" id="passwordField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="passwordField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-1-error">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="password" type="text" name="password" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-1-error">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-1-error" data-slot="error" class="mt-2 text-error">Must be at least 8 characters</div>
     </div>
   </div>
 </form>"
@@ -347,26 +347,26 @@ exports[`Form > zod validation works > with error 1`] = `
 
 exports[`Form > zod validation works > without error 1`] = `
 "<form id="42" class="">
-  <div class="text-sm" id="emailField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="emailField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="email" type="text" name="email" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
     </div>
   </div>
-  <div class="text-sm" id="passwordField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="passwordField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="password" type="text" name="password" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
         <!--v-if-->
         <!--v-if-->
       </div>
diff --git a/test/components/__snapshots__/Form.spec.ts.snap b/test/components/__snapshots__/Form.spec.ts.snap
index 97b7f0813f..cc30f27bd5 100644
--- a/test/components/__snapshots__/Form.spec.ts.snap
+++ b/test/components/__snapshots__/Form.spec.ts.snap
@@ -2,30 +2,30 @@
 
 exports[`Form > custom validation works > with error 1`] = `
 "<form id="42" class="">
-  <div class="text-sm" id="emailField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="emailField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="email" type="text" name="email" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
     </div>
   </div>
-  <div class="text-sm" id="passwordField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="passwordField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-0-0-1-error">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="password" type="text" name="password" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-0-0-1-error">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Must be at least 8 characters</div>
     </div>
   </div>
 </form>"
@@ -33,26 +33,26 @@ exports[`Form > custom validation works > with error 1`] = `
 
 exports[`Form > custom validation works > without error 1`] = `
 "<form id="42" class="">
-  <div class="text-sm" id="emailField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="emailField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="email" type="text" name="email" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
     </div>
   </div>
-  <div class="text-sm" id="passwordField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="passwordField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="password" type="text" name="password" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -64,30 +64,30 @@ exports[`Form > custom validation works > without error 1`] = `
 
 exports[`Form > joi validation works > with error 1`] = `
 "<form id="42" class="">
-  <div class="text-sm" id="emailField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="emailField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="email" type="text" name="email" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
     </div>
   </div>
-  <div class="text-sm" id="passwordField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="passwordField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-0-0-1-error">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="password" type="text" name="password" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-0-0-1-error">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Must be at least 8 characters</div>
     </div>
   </div>
 </form>"
@@ -95,26 +95,26 @@ exports[`Form > joi validation works > with error 1`] = `
 
 exports[`Form > joi validation works > without error 1`] = `
 "<form id="42" class="">
-  <div class="text-sm" id="emailField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="emailField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="email" type="text" name="email" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
     </div>
   </div>
-  <div class="text-sm" id="passwordField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="passwordField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="password" type="text" name="password" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -130,30 +130,30 @@ exports[`Form > renders with state correctly 1`] = `"<form id="v-0-0" class=""><
 
 exports[`Form > superstruct validation works > with error 1`] = `
 "<form id="42" class="">
-  <div class="text-sm" id="emailField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="emailField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="email" type="text" name="email" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
     </div>
   </div>
-  <div class="text-sm" id="passwordField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="passwordField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-0-0-1-error">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="password" type="text" name="password" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-0-0-1-error">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Must be at least 8 characters</div>
     </div>
   </div>
 </form>"
@@ -161,26 +161,26 @@ exports[`Form > superstruct validation works > with error 1`] = `
 
 exports[`Form > superstruct validation works > without error 1`] = `
 "<form id="42" class="">
-  <div class="text-sm" id="emailField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="emailField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="email" type="text" name="email" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
     </div>
   </div>
-  <div class="text-sm" id="passwordField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="passwordField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="password" type="text" name="password" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -192,30 +192,30 @@ exports[`Form > superstruct validation works > without error 1`] = `
 
 exports[`Form > valibot validation works > with error 1`] = `
 "<form id="42" class="">
-  <div class="text-sm" id="emailField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="emailField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="email" type="text" name="email" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
     </div>
   </div>
-  <div class="text-sm" id="passwordField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="passwordField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-0-0-1-error">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="password" type="text" name="password" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-0-0-1-error">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Must be at least 8 characters</div>
     </div>
   </div>
 </form>"
@@ -223,26 +223,26 @@ exports[`Form > valibot validation works > with error 1`] = `
 
 exports[`Form > valibot validation works > without error 1`] = `
 "<form id="42" class="">
-  <div class="text-sm" id="emailField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="emailField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="email" type="text" name="email" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
     </div>
   </div>
-  <div class="text-sm" id="passwordField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="passwordField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="password" type="text" name="password" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -254,30 +254,30 @@ exports[`Form > valibot validation works > without error 1`] = `
 
 exports[`Form > yup validation works > with error 1`] = `
 "<form id="42" class="">
-  <div class="text-sm" id="emailField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="emailField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="email" type="text" name="email" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
     </div>
   </div>
-  <div class="text-sm" id="passwordField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="passwordField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-0-0-1-error">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="password" type="text" name="password" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-0-0-1-error">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Must be at least 8 characters</div>
     </div>
   </div>
 </form>"
@@ -285,26 +285,26 @@ exports[`Form > yup validation works > with error 1`] = `
 
 exports[`Form > yup validation works > without error 1`] = `
 "<form id="42" class="">
-  <div class="text-sm" id="emailField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="emailField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="email" type="text" name="email" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
     </div>
   </div>
-  <div class="text-sm" id="passwordField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="passwordField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="password" type="text" name="password" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -316,30 +316,30 @@ exports[`Form > yup validation works > without error 1`] = `
 
 exports[`Form > zod validation works > with error 1`] = `
 "<form id="42" class="">
-  <div class="text-sm" id="emailField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="emailField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="email" type="text" name="email" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
     </div>
   </div>
-  <div class="text-sm" id="passwordField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="passwordField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-0-0-1-error">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="password" type="text" name="password" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-0-0-1-error">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Must be at least 8 characters</div>
     </div>
   </div>
 </form>"
@@ -347,26 +347,26 @@ exports[`Form > zod validation works > with error 1`] = `
 
 exports[`Form > zod validation works > without error 1`] = `
 "<form id="42" class="">
-  <div class="text-sm" id="emailField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="emailField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="email" type="text" name="email" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
     </div>
   </div>
-  <div class="text-sm" id="passwordField">
-    <div class="">
+  <div data-slot="root" class="text-sm" id="passwordField">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
+      <div data-slot="root" class="relative inline-flex items-center"><input id="password" type="text" name="password" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
         <!--v-if-->
         <!--v-if-->
       </div>
diff --git a/test/components/__snapshots__/FormField-vue.spec.ts.snap b/test/components/__snapshots__/FormField-vue.spec.ts.snap
index be708f59d5..91c97a8c07 100644
--- a/test/components/__snapshots__/FormField-vue.spec.ts.snap
+++ b/test/components/__snapshots__/FormField-vue.spec.ts.snap
@@ -1,8 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`FormField > renders with as correctly 1`] = `
-"<section class="text-sm">
-  <div class="">
+"<section data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -13,8 +13,8 @@ exports[`FormField > renders with as correctly 1`] = `
 `;
 
 exports[`FormField > renders with class correctly 1`] = `
-"<div class="text-sm relative">
-  <div class="">
+"<div data-slot="root" class="text-sm relative">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -25,8 +25,8 @@ exports[`FormField > renders with class correctly 1`] = `
 `;
 
 exports[`FormField > renders with default slot correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -37,10 +37,10 @@ exports[`FormField > renders with default slot correctly 1`] = `
 `;
 
 exports[`FormField > renders with description slot correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p id="v-0-0-description" class="text-muted">Description slot</p>
+    <p id="v-0-0-description" data-slot="description" class="text-muted">Description slot</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->
@@ -49,56 +49,56 @@ exports[`FormField > renders with description slot correctly 1`] = `
 `;
 
 exports[`FormField > renders with error correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
   </div>
   <div class="">
-    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
+    <div id="v-0-0-error" data-slot="error" class="mt-2 text-error">Username is already taken</div>
   </div>
 </div>"
 `;
 
 exports[`FormField > renders with error slot correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
   </div>
   <div class="">
-    <div id="v-0-0-error" class="mt-2 text-error">Error slot</div>
+    <div id="v-0-0-error" data-slot="error" class="mt-2 text-error">Error slot</div>
   </div>
 </div>"
 `;
 
 exports[`FormField > renders with help correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
   </div>
   <div class="">
-    <div id="v-0-0-help" class="mt-2 text-muted">Username must be unique</div>
+    <div id="v-0-0-help" data-slot="help" class="mt-2 text-muted">Username must be unique</div>
   </div>
 </div>"
 `;
 
 exports[`FormField > renders with help slot correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
   </div>
   <div class="">
-    <div id="v-0-0-help" class="mt-2 text-muted">Help slot</div>
+    <div id="v-0-0-help" data-slot="help" class="mt-2 text-muted">Help slot</div>
   </div>
 </div>"
 `;
 
 exports[`FormField > renders with hint correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -109,8 +109,8 @@ exports[`FormField > renders with hint correctly 1`] = `
 `;
 
 exports[`FormField > renders with hint slot correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -121,12 +121,12 @@ exports[`FormField > renders with hint slot correctly 1`] = `
 `;
 
 exports[`FormField > renders with label and description correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-default">Username</label>
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
-    <p id="v-0-0-description" class="text-muted">Enter your username</p>
+    <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->
@@ -135,9 +135,9 @@ exports[`FormField > renders with label and description correctly 1`] = `
 `;
 
 exports[`FormField > renders with label slot correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-default">Label slot</label>
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Label slot</label>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -149,9 +149,9 @@ exports[`FormField > renders with label slot correctly 1`] = `
 `;
 
 exports[`FormField > renders with required correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Username</label>
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0" data-slot="label" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Username</label>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -163,12 +163,12 @@ exports[`FormField > renders with required correctly 1`] = `
 `;
 
 exports[`FormField > renders with size lg correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-default">Username</label>
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
-    <p id="v-0-0-description" class="text-muted">Enter your username</p>
+    <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->
@@ -177,12 +177,12 @@ exports[`FormField > renders with size lg correctly 1`] = `
 `;
 
 exports[`FormField > renders with size md correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-default">Username</label>
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
-    <p id="v-0-0-description" class="text-muted">Enter your username</p>
+    <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->
@@ -191,12 +191,12 @@ exports[`FormField > renders with size md correctly 1`] = `
 `;
 
 exports[`FormField > renders with size sm correctly 1`] = `
-"<div class="text-xs">
-  <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-default">Username</label>
+"<div data-slot="root" class="text-xs">
+  <div data-slot="wrapper" class="">
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
-    <p id="v-0-0-description" class="text-muted">Enter your username</p>
+    <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->
@@ -205,12 +205,12 @@ exports[`FormField > renders with size sm correctly 1`] = `
 `;
 
 exports[`FormField > renders with size xl correctly 1`] = `
-"<div class="text-base">
-  <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-default">Username</label>
+"<div data-slot="root" class="text-base">
+  <div data-slot="wrapper" class="">
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
-    <p id="v-0-0-description" class="text-muted">Enter your username</p>
+    <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->
@@ -219,12 +219,12 @@ exports[`FormField > renders with size xl correctly 1`] = `
 `;
 
 exports[`FormField > renders with size xs correctly 1`] = `
-"<div class="text-xs">
-  <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-default">Username</label>
+"<div data-slot="root" class="text-xs">
+  <div data-slot="wrapper" class="">
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
-    <p id="v-0-0-description" class="text-muted">Enter your username</p>
+    <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->
@@ -233,8 +233,8 @@ exports[`FormField > renders with size xs correctly 1`] = `
 `;
 
 exports[`FormField > renders with ui correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
   </div>
diff --git a/test/components/__snapshots__/FormField.spec.ts.snap b/test/components/__snapshots__/FormField.spec.ts.snap
index be708f59d5..91c97a8c07 100644
--- a/test/components/__snapshots__/FormField.spec.ts.snap
+++ b/test/components/__snapshots__/FormField.spec.ts.snap
@@ -1,8 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`FormField > renders with as correctly 1`] = `
-"<section class="text-sm">
-  <div class="">
+"<section data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -13,8 +13,8 @@ exports[`FormField > renders with as correctly 1`] = `
 `;
 
 exports[`FormField > renders with class correctly 1`] = `
-"<div class="text-sm relative">
-  <div class="">
+"<div data-slot="root" class="text-sm relative">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -25,8 +25,8 @@ exports[`FormField > renders with class correctly 1`] = `
 `;
 
 exports[`FormField > renders with default slot correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -37,10 +37,10 @@ exports[`FormField > renders with default slot correctly 1`] = `
 `;
 
 exports[`FormField > renders with description slot correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p id="v-0-0-description" class="text-muted">Description slot</p>
+    <p id="v-0-0-description" data-slot="description" class="text-muted">Description slot</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->
@@ -49,56 +49,56 @@ exports[`FormField > renders with description slot correctly 1`] = `
 `;
 
 exports[`FormField > renders with error correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
   </div>
   <div class="">
-    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
+    <div id="v-0-0-error" data-slot="error" class="mt-2 text-error">Username is already taken</div>
   </div>
 </div>"
 `;
 
 exports[`FormField > renders with error slot correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
   </div>
   <div class="">
-    <div id="v-0-0-error" class="mt-2 text-error">Error slot</div>
+    <div id="v-0-0-error" data-slot="error" class="mt-2 text-error">Error slot</div>
   </div>
 </div>"
 `;
 
 exports[`FormField > renders with help correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
   </div>
   <div class="">
-    <div id="v-0-0-help" class="mt-2 text-muted">Username must be unique</div>
+    <div id="v-0-0-help" data-slot="help" class="mt-2 text-muted">Username must be unique</div>
   </div>
 </div>"
 `;
 
 exports[`FormField > renders with help slot correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
   </div>
   <div class="">
-    <div id="v-0-0-help" class="mt-2 text-muted">Help slot</div>
+    <div id="v-0-0-help" data-slot="help" class="mt-2 text-muted">Help slot</div>
   </div>
 </div>"
 `;
 
 exports[`FormField > renders with hint correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -109,8 +109,8 @@ exports[`FormField > renders with hint correctly 1`] = `
 `;
 
 exports[`FormField > renders with hint slot correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -121,12 +121,12 @@ exports[`FormField > renders with hint slot correctly 1`] = `
 `;
 
 exports[`FormField > renders with label and description correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-default">Username</label>
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
-    <p id="v-0-0-description" class="text-muted">Enter your username</p>
+    <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->
@@ -135,9 +135,9 @@ exports[`FormField > renders with label and description correctly 1`] = `
 `;
 
 exports[`FormField > renders with label slot correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-default">Label slot</label>
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Label slot</label>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -149,9 +149,9 @@ exports[`FormField > renders with label slot correctly 1`] = `
 `;
 
 exports[`FormField > renders with required correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Username</label>
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0" data-slot="label" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Username</label>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -163,12 +163,12 @@ exports[`FormField > renders with required correctly 1`] = `
 `;
 
 exports[`FormField > renders with size lg correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-default">Username</label>
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
-    <p id="v-0-0-description" class="text-muted">Enter your username</p>
+    <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->
@@ -177,12 +177,12 @@ exports[`FormField > renders with size lg correctly 1`] = `
 `;
 
 exports[`FormField > renders with size md correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-default">Username</label>
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
-    <p id="v-0-0-description" class="text-muted">Enter your username</p>
+    <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->
@@ -191,12 +191,12 @@ exports[`FormField > renders with size md correctly 1`] = `
 `;
 
 exports[`FormField > renders with size sm correctly 1`] = `
-"<div class="text-xs">
-  <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-default">Username</label>
+"<div data-slot="root" class="text-xs">
+  <div data-slot="wrapper" class="">
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
-    <p id="v-0-0-description" class="text-muted">Enter your username</p>
+    <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->
@@ -205,12 +205,12 @@ exports[`FormField > renders with size sm correctly 1`] = `
 `;
 
 exports[`FormField > renders with size xl correctly 1`] = `
-"<div class="text-base">
-  <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-default">Username</label>
+"<div data-slot="root" class="text-base">
+  <div data-slot="wrapper" class="">
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
-    <p id="v-0-0-description" class="text-muted">Enter your username</p>
+    <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->
@@ -219,12 +219,12 @@ exports[`FormField > renders with size xl correctly 1`] = `
 `;
 
 exports[`FormField > renders with size xs correctly 1`] = `
-"<div class="text-xs">
-  <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-default">Username</label>
+"<div data-slot="root" class="text-xs">
+  <div data-slot="wrapper" class="">
+    <div data-slot="labelWrapper" class="flex content-center items-center justify-between"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
     </div>
-    <p id="v-0-0-description" class="text-muted">Enter your username</p>
+    <p id="v-0-0-description" data-slot="description" class="text-muted">Enter your username</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->
@@ -233,8 +233,8 @@ exports[`FormField > renders with size xs correctly 1`] = `
 `;
 
 exports[`FormField > renders with ui correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
+"<div data-slot="root" class="text-sm">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
   </div>
diff --git a/test/components/__snapshots__/Header-vue.spec.ts.snap b/test/components/__snapshots__/Header-vue.spec.ts.snap
index 5f15ac4d6b..653ec36653 100644
--- a/test/components/__snapshots__/Header-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Header-vue.spec.ts.snap
@@ -1,13 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Header > renders with as correctly 1`] = `
-"<section class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<section data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -19,13 +19,13 @@ exports[`Header > renders with as correctly 1`] = `
 `;
 
 exports[`Header > renders with body slot correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -37,13 +37,13 @@ exports[`Header > renders with body slot correctly 1`] = `
 `;
 
 exports[`Header > renders with bottom slot correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -55,13 +55,13 @@ exports[`Header > renders with bottom slot correctly 1`] = `
 `;
 
 exports[`Header > renders with class correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-default h-(--ui-header-height) sticky top-0 z-50 border-b-0">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-default h-(--ui-header-height) sticky top-0 z-50 border-b-0">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -73,13 +73,13 @@ exports[`Header > renders with class correctly 1`] = `
 `;
 
 exports[`Header > renders with content slot correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -91,13 +91,13 @@ exports[`Header > renders with content slot correctly 1`] = `
 `;
 
 exports[`Header > renders with default slot correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex">Default slot</div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="center" class="hidden lg:flex">Default slot</div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -109,13 +109,13 @@ exports[`Header > renders with default slot correctly 1`] = `
 `;
 
 exports[`Header > renders with left slot correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if-->Left slot
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -127,13 +127,13 @@ exports[`Header > renders with left slot correctly 1`] = `
 `;
 
 exports[`Header > renders with mode drawer correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -143,11 +143,11 @@ exports[`Header > renders with mode drawer correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75 lg:hidden"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">header.title</h2><p id="reka-dialog-description-v-1">header.description</p></span>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75 lg:hidden"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">header.title</h2><p id="reka-dialog-description-v-1">header.description</p></span>
   <!--v-if-->
-  <div class="p-4 sm:p-6 overflow-y-auto"></div>
+  <div data-slot="body" class="p-4 sm:p-6 overflow-y-auto"></div>
 </div>
 
 
@@ -155,13 +155,13 @@ exports[`Header > renders with mode drawer correctly 1`] = `
 `;
 
 exports[`Header > renders with mode modal correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -172,18 +172,18 @@ exports[`Header > renders with mode modal correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 lg:hidden"></div>
-<div data-dismissable-layer="" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none inset-0 fixed lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">header.title</h2><p id="reka-dialog-description-v-1">header.description</p></span>
-  <div class="px-4 sm:px-6 h-(--ui-header-height) shrink-0 flex items-center justify-between gap-3">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 lg:hidden"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none inset-0 fixed lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">header.title</h2><p id="reka-dialog-description-v-1">header.description</p></span>
+  <div data-slot="header" class="px-4 sm:px-6 h-(--ui-header-height) shrink-0 flex items-center justify-between gap-3">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
   </div>
-  <div class="p-4 sm:p-6 overflow-y-auto"></div>
+  <div data-slot="body" class="p-4 sm:p-6 overflow-y-auto"></div>
 </div>
 
 
@@ -192,13 +192,13 @@ exports[`Header > renders with mode modal correctly 1`] = `
 `;
 
 exports[`Header > renders with mode slideover correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -208,18 +208,18 @@ exports[`Header > renders with mode slideover correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] lg:hidden"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out] lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">header.title</h2><p id="reka-dialog-description-v-1">header.description</p></span>
-  <div class="px-4 sm:px-6 h-(--ui-header-height) shrink-0 flex items-center justify-between gap-3">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] lg:hidden"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out] lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">header.title</h2><p id="reka-dialog-description-v-1">header.description</p></span>
+  <div data-slot="header" class="px-4 sm:px-6 h-(--ui-header-height) shrink-0 flex items-center justify-between gap-3">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
   </div>
-  <div class="p-4 sm:p-6 overflow-y-auto"></div>
+  <div data-slot="body" class="p-4 sm:p-6 overflow-y-auto"></div>
 </div>
 
 
@@ -227,13 +227,13 @@ exports[`Header > renders with mode slideover correctly 1`] = `
 `;
 
 exports[`Header > renders with right slot correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5">Right slot<button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5">Right slot<button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -245,13 +245,13 @@ exports[`Header > renders with right slot correctly 1`] = `
 `;
 
 exports[`Header > renders with title correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Documentation" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Documentation</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Documentation" data-slot="title" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Documentation</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -263,13 +263,13 @@ exports[`Header > renders with title correctly 1`] = `
 `;
 
 exports[`Header > renders with title slot correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Title slot" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Title slot</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Title slot" data-slot="title" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Title slot</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -281,13 +281,13 @@ exports[`Header > renders with title slot correctly 1`] = `
 `;
 
 exports[`Header > renders with to correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/docs" aria-label="Nuxt UI" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/docs" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -299,13 +299,13 @@ exports[`Header > renders with to correctly 1`] = `
 `;
 
 exports[`Header > renders with toggle correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -317,13 +317,13 @@ exports[`Header > renders with toggle correctly 1`] = `
 `;
 
 exports[`Header > renders with toggle slot correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5">Toggle slot</div>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5">Toggle slot</div>
   </div>
 </header>
 <!--v-if-->
@@ -332,14 +332,14 @@ exports[`Header > renders with toggle slot correctly 1`] = `
 `;
 
 exports[`Header > renders with toggleSide correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -ms-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -ms-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
-      </button><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a></div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5">
+      </button><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a></div>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5">
       <!--v-if-->
     </div>
   </div>
@@ -350,12 +350,12 @@ exports[`Header > renders with toggleSide correctly 1`] = `
 `;
 
 exports[`Header > renders with top slot correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">Top slot<div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">Top slot<div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -367,13 +367,13 @@ exports[`Header > renders with top slot correctly 1`] = `
 `;
 
 exports[`Header > renders with ui correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-full gap-1.5">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-full gap-1.5" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -385,13 +385,13 @@ exports[`Header > renders with ui correctly 1`] = `
 `;
 
 exports[`Header > renders without toggle correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5">
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5">
       <!--v-if-->
     </div>
   </div>
diff --git a/test/components/__snapshots__/Header.spec.ts.snap b/test/components/__snapshots__/Header.spec.ts.snap
index c3772746a9..3eaa872c73 100644
--- a/test/components/__snapshots__/Header.spec.ts.snap
+++ b/test/components/__snapshots__/Header.spec.ts.snap
@@ -1,13 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Header > renders with as correctly 1`] = `
-"<section class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<section data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -19,13 +19,13 @@ exports[`Header > renders with as correctly 1`] = `
 `;
 
 exports[`Header > renders with body slot correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -37,13 +37,13 @@ exports[`Header > renders with body slot correctly 1`] = `
 `;
 
 exports[`Header > renders with bottom slot correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -55,13 +55,13 @@ exports[`Header > renders with bottom slot correctly 1`] = `
 `;
 
 exports[`Header > renders with class correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-default h-(--ui-header-height) sticky top-0 z-50 border-b-0">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-default h-(--ui-header-height) sticky top-0 z-50 border-b-0">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -73,13 +73,13 @@ exports[`Header > renders with class correctly 1`] = `
 `;
 
 exports[`Header > renders with content slot correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -91,13 +91,13 @@ exports[`Header > renders with content slot correctly 1`] = `
 `;
 
 exports[`Header > renders with default slot correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex">Default slot</div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="center" class="hidden lg:flex">Default slot</div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -109,13 +109,13 @@ exports[`Header > renders with default slot correctly 1`] = `
 `;
 
 exports[`Header > renders with left slot correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if-->Left slot
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -127,13 +127,13 @@ exports[`Header > renders with left slot correctly 1`] = `
 `;
 
 exports[`Header > renders with mode drawer correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -143,11 +143,11 @@ exports[`Header > renders with mode drawer correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="fixed inset-0 bg-elevated/75 lg:hidden"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">header.title</h2><p id="reka-dialog-description-v-0-0-1">header.description</p></span>
+<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75 lg:hidden"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">header.title</h2><p id="reka-dialog-description-v-0-0-1">header.description</p></span>
   <!--v-if-->
-  <div class="p-4 sm:p-6 overflow-y-auto"></div>
+  <div data-slot="body" class="p-4 sm:p-6 overflow-y-auto"></div>
 </div>
 
 
@@ -155,13 +155,13 @@ exports[`Header > renders with mode drawer correctly 1`] = `
 `;
 
 exports[`Header > renders with mode modal correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -172,18 +172,18 @@ exports[`Header > renders with mode modal correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 lg:hidden"></div>
-<div data-dismissable-layer="" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none inset-0 fixed lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">header.title</h2><p id="reka-dialog-description-v-0-0-1">header.description</p></span>
-  <div class="px-4 sm:px-6 h-(--ui-header-height) shrink-0 flex items-center justify-between gap-3">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 lg:hidden"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none inset-0 fixed lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">header.title</h2><p id="reka-dialog-description-v-0-0-1">header.description</p></span>
+  <div data-slot="header" class="px-4 sm:px-6 h-(--ui-header-height) shrink-0 flex items-center justify-between gap-3">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
   </div>
-  <div class="p-4 sm:p-6 overflow-y-auto"></div>
+  <div data-slot="body" class="p-4 sm:p-6 overflow-y-auto"></div>
 </div>
 
 
@@ -192,13 +192,13 @@ exports[`Header > renders with mode modal correctly 1`] = `
 `;
 
 exports[`Header > renders with mode slideover correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -208,18 +208,18 @@ exports[`Header > renders with mode slideover correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] lg:hidden"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out] lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">header.title</h2><p id="reka-dialog-description-v-0-0-1">header.description</p></span>
-  <div class="px-4 sm:px-6 h-(--ui-header-height) shrink-0 flex items-center justify-between gap-3">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] lg:hidden"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out] lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">header.title</h2><p id="reka-dialog-description-v-0-0-1">header.description</p></span>
+  <div data-slot="header" class="px-4 sm:px-6 h-(--ui-header-height) shrink-0 flex items-center justify-between gap-3">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Close menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
   </div>
-  <div class="p-4 sm:p-6 overflow-y-auto"></div>
+  <div data-slot="body" class="p-4 sm:p-6 overflow-y-auto"></div>
 </div>
 
 
@@ -227,13 +227,13 @@ exports[`Header > renders with mode slideover correctly 1`] = `
 `;
 
 exports[`Header > renders with right slot correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5">Right slot<button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5">Right slot<button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -245,13 +245,13 @@ exports[`Header > renders with right slot correctly 1`] = `
 `;
 
 exports[`Header > renders with title correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Documentation" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Documentation</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Documentation" data-slot="title" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Documentation</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -263,13 +263,13 @@ exports[`Header > renders with title correctly 1`] = `
 `;
 
 exports[`Header > renders with title slot correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Title slot" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Title slot</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Title slot" data-slot="title" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Title slot</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -281,13 +281,13 @@ exports[`Header > renders with title slot correctly 1`] = `
 `;
 
 exports[`Header > renders with to correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/docs" aria-label="Nuxt UI" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/docs" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -299,13 +299,13 @@ exports[`Header > renders with to correctly 1`] = `
 `;
 
 exports[`Header > renders with toggle correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -317,13 +317,13 @@ exports[`Header > renders with toggle correctly 1`] = `
 `;
 
 exports[`Header > renders with toggle slot correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5">Toggle slot</div>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5">Toggle slot</div>
   </div>
 </header>
 <!--v-if-->
@@ -332,14 +332,14 @@ exports[`Header > renders with toggle slot correctly 1`] = `
 `;
 
 exports[`Header > renders with toggleSide correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -ms-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -ms-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
-      </button><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a></div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5">
+      </button><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a></div>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5">
       <!--v-if-->
     </div>
   </div>
@@ -350,12 +350,12 @@ exports[`Header > renders with toggleSide correctly 1`] = `
 `;
 
 exports[`Header > renders with top slot correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">Top slot<div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">Top slot<div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -367,13 +367,13 @@ exports[`Header > renders with top slot correctly 1`] = `
 `;
 
 exports[`Header > renders with ui correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-full gap-1.5">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-full gap-1.5" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -385,13 +385,13 @@ exports[`Header > renders with ui correctly 1`] = `
 `;
 
 exports[`Header > renders without toggle correctly 1`] = `
-"<header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full">
-    <div class="lg:flex-1 flex items-center gap-1.5">
-      <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
+"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+    <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
+      <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
-    <div class="hidden lg:flex"></div>
-    <div class="flex items-center justify-end lg:flex-1 gap-1.5">
+    <div data-slot="center" class="hidden lg:flex"></div>
+    <div data-slot="right" class="flex items-center justify-end lg:flex-1 gap-1.5">
       <!--v-if-->
     </div>
   </div>
diff --git a/test/components/__snapshots__/Input-vue.spec.ts.snap b/test/components/__snapshots__/Input-vue.spec.ts.snap
index 39c7df1e11..f787d48df5 100644
--- a/test/components/__snapshots__/Input-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Input-vue.spec.ts.snap
@@ -1,271 +1,271 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Input > renders with ariaLabel correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-label="Aria label">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-label="Aria label">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with as correctly 1`] = `
-"<section class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<section data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </section>"
 `;
 
 exports[`Input > renders with avatar and leadingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
   <!--v-if-->
 </div>"
 `;
 
-exports[`Input > renders with avatar and trailingIcon correctly 1`] = `"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></div>"`;
+exports[`Input > renders with avatar and trailingIcon correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" autocomplete="off"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span></div>"`;
 
 exports[`Input > renders with avatar correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with class correctly 1`] = `
-"<div class="inline-flex items-center absolute"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<div data-slot="root" class="inline-flex items-center absolute"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with default slot correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">Default slot
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">Default slot
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with disabled correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" disabled="" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" disabled="" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with file type correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="file" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented file:me-1.5 file:font-medium file:text-muted file:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="file" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented file:me-1.5 file:font-medium file:text-muted file:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with icon correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with id correctly 1`] = `
-"<div class="relative inline-flex items-center"><input id="id" type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input id="id" type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with leading and icon correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with leading slot correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span>
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with leadingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with loading and avatar correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with loading correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
   <!--v-if-->
 </div>"
 `;
 
-exports[`Input > renders with loading trailing and avatar correctly 1`] = `"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></div>"`;
+exports[`Input > renders with loading trailing and avatar correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" autocomplete="off"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span></div>"`;
 
 exports[`Input > renders with loading trailing correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off">
-  <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off">
+  <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
 </div>"
 `;
 
 exports[`Input > renders with loadingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with name correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" name="name" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" name="name" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with neutral variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with neutral variant none correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with neutral variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with neutral variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with neutral variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with placeholder correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" placeholder="Search..." class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" placeholder="Search..." data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with primary variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with primary variant none correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with primary variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with primary variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with primary variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with required correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" required="" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" required="" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with size lg correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with size md correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with size sm correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with size xl correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with size xs correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with trailing and icon correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off">
-  <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off">
+  <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </div>"
 `;
 
 exports[`Input > renders with trailing slot correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off">
-  <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span>
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off">
+  <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span>
 </div>"
 `;
 
 exports[`Input > renders with trailingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off">
-  <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off">
+  <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </div>"
 `;
 
 exports[`Input > renders with type correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="password" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with ui correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
diff --git a/test/components/__snapshots__/Input.spec.ts.snap b/test/components/__snapshots__/Input.spec.ts.snap
index ea74c4dd0d..a6772ec109 100644
--- a/test/components/__snapshots__/Input.spec.ts.snap
+++ b/test/components/__snapshots__/Input.spec.ts.snap
@@ -1,271 +1,271 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Input > renders with ariaLabel correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-label="Aria label">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-label="Aria label">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with as correctly 1`] = `
-"<section class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<section data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </section>"
 `;
 
 exports[`Input > renders with avatar and leadingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
   <!--v-if-->
 </div>"
 `;
 
-exports[`Input > renders with avatar and trailingIcon correctly 1`] = `"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></div>"`;
+exports[`Input > renders with avatar and trailingIcon correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" autocomplete="off"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span></div>"`;
 
 exports[`Input > renders with avatar correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with class correctly 1`] = `
-"<div class="inline-flex items-center absolute"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<div data-slot="root" class="inline-flex items-center absolute"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with default slot correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">Default slot
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">Default slot
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with disabled correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" disabled="" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" disabled="" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with file type correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="file" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented file:me-1.5 file:font-medium file:text-muted file:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="file" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented file:me-1.5 file:font-medium file:text-muted file:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with icon correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with id correctly 1`] = `
-"<div class="relative inline-flex items-center"><input id="id" type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input id="id" type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with leading and icon correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with leading slot correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span>
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with leadingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with loading and avatar correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with loading correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span>
   <!--v-if-->
 </div>"
 `;
 
-exports[`Input > renders with loading trailing and avatar correctly 1`] = `"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></div>"`;
+exports[`Input > renders with loading trailing and avatar correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" autocomplete="off"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span></div>"`;
 
 exports[`Input > renders with loading trailing correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off">
-  <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off">
+  <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </div>"
 `;
 
 exports[`Input > renders with loadingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" autocomplete="off"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with name correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" name="name" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" name="name" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with neutral variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with neutral variant none correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with neutral variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with neutral variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with neutral variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with placeholder correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" placeholder="Search..." class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" placeholder="Search..." data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with primary variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with primary variant none correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with primary variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with primary variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with primary variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with required correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" required="" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" required="" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with size lg correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with size md correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with size sm correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with size xl correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with size xs correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with trailing and icon correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off">
-  <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off">
+  <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </div>"
 `;
 
 exports[`Input > renders with trailing slot correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off">
-  <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span>
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off">
+  <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span>
 </div>"
 `;
 
 exports[`Input > renders with trailingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off">
-  <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" autocomplete="off">
+  <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </div>"
 `;
 
 exports[`Input > renders with type correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="password" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with ui correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full" autocomplete="off">
+"<div data-slot="root" class="relative inline-flex items-center"><input type="text" data-slot="base" class="w-full border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
diff --git a/test/components/__snapshots__/InputDate-vue.spec.ts.snap b/test/components/__snapshots__/InputDate-vue.spec.ts.snap
index 6cd599672a..93767ce3f0 100644
--- a/test/components/__snapshots__/InputDate-vue.spec.ts.snap
+++ b/test/components/__snapshots__/InputDate-vue.spec.ts.snap
@@ -1,375 +1,375 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`InputDate > renders with ariaLabel correctly 1`] = `
-"<div aria-label="Aria label" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div aria-label="Aria label" data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with as correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with class correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary max-w-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary max-w-sm" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with default slot correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>Default slot
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>Default slot
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with default value correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="1" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="1" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-01">
 </div>"
 `;
 
 exports[`InputDate > renders with disabled correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" aria-disabled="true" data-disabled="" dir="ltr">
-  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" aria-disabled="true" data-disabled="" dir="ltr">
+  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" disabled="" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with isDateUnavailable correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with leading slot correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div><span class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span>
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with maxValue correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with minValue correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with modelValue correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="1" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="1" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-01">
 </div>"
 `;
 
 exports[`InputDate > renders with neutral variant ghost correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="day">15</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="year">2025</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="year">2025</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
 </div>"
 `;
 
 exports[`InputDate > renders with neutral variant none correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
 </div>"
 `;
 
 exports[`InputDate > renders with neutral variant outline correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
 </div>"
 `;
 
 exports[`InputDate > renders with neutral variant soft correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="day">15</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="year">2025</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="year">2025</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
 </div>"
 `;
 
 exports[`InputDate > renders with neutral variant subtle correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="day">15</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="year">2025</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="year">2025</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
 </div>"
 `;
 
 exports[`InputDate > renders with primary variant ghost correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="day">15</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="year">2025</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="year">2025</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
 </div>"
 `;
 
 exports[`InputDate > renders with primary variant none correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
 </div>"
 `;
 
 exports[`InputDate > renders with primary variant outline correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
 </div>"
 `;
 
 exports[`InputDate > renders with primary variant soft correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="day">15</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="year">2025</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="year">2025</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
 </div>"
 `;
 
 exports[`InputDate > renders with primary variant subtle correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="day">15</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="year">2025</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="year">2025</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
 </div>"
 `;
 
 exports[`InputDate > renders with range correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="start" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="start" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-reka-date-range-field-segment-type="start" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4 text-muted"></svg>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="end" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="end" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-reka-date-range-field-segment-type="end" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-4 text-muted"></svg>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="undefined - undefined">
 </div>"
 `;
 
 exports[`InputDate > renders with readonly correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" data-readonly="" dir="ltr">
-  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" data-readonly="" dir="ltr">
+  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" aria-readonly="true" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" aria-readonly="true" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" aria-readonly="true" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" aria-readonly="true" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" aria-readonly="true" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with separator slot correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with size lg correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-sm gap-0.75 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-sm gap-0.75 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with size md correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with size sm correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-xs gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-xs gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with size xl correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-base gap-0.75 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-base gap-0.75 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with size xs correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2 py-1 text-xs gap-0.25 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2 py-1 text-xs gap-0.25 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with trailing slot correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
-  <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with ui correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
diff --git a/test/components/__snapshots__/InputDate.spec.ts.snap b/test/components/__snapshots__/InputDate.spec.ts.snap
index a7e91c4fa3..19b8c7e28e 100644
--- a/test/components/__snapshots__/InputDate.spec.ts.snap
+++ b/test/components/__snapshots__/InputDate.spec.ts.snap
@@ -1,375 +1,375 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`InputDate > renders with ariaLabel correctly 1`] = `
-"<div aria-label="Aria label" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div aria-label="Aria label" data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with as correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with class correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary max-w-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary max-w-sm" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with default slot correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>Default slot
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>Default slot
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with default value correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="1" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="1" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-01">
 </div>"
 `;
 
 exports[`InputDate > renders with disabled correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" aria-disabled="true" data-disabled="" dir="ltr">
-  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" aria-disabled="true" data-disabled="" dir="ltr">
+  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" disabled="" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with isDateUnavailable correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with leading slot correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div><span class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span>
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with maxValue correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with minValue correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with modelValue correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="1" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="1" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-01">
 </div>"
 `;
 
 exports[`InputDate > renders with neutral variant ghost correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="day">15</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="year">2025</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="year">2025</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
 </div>"
 `;
 
 exports[`InputDate > renders with neutral variant none correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
 </div>"
 `;
 
 exports[`InputDate > renders with neutral variant outline correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
 </div>"
 `;
 
 exports[`InputDate > renders with neutral variant soft correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="day">15</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="year">2025</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="year">2025</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
 </div>"
 `;
 
 exports[`InputDate > renders with neutral variant subtle correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="day">15</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="year">2025</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="year">2025</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
 </div>"
 `;
 
 exports[`InputDate > renders with primary variant ghost correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="day">15</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="year">2025</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="year">2025</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
 </div>"
 `;
 
 exports[`InputDate > renders with primary variant none correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
 </div>"
 `;
 
 exports[`InputDate > renders with primary variant outline correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
 </div>"
 `;
 
 exports[`InputDate > renders with primary variant soft correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="day">15</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="year">2025</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="year">2025</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
 </div>"
 `;
 
 exports[`InputDate > renders with primary variant subtle correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="day">15</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="year">2025</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="year">2025</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
 </div>"
 `;
 
 exports[`InputDate > renders with range correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="start" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="start" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-reka-date-range-field-segment-type="start" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div><span class="iconify i-lucide:minus shrink-0 size-4 text-muted" aria-hidden="true"></span>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="end" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="end" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-reka-date-range-field-segment-type="end" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div><span class="iconify i-lucide:minus shrink-0 size-4 text-muted" aria-hidden="true" data-slot="separatorIcon"></span>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="undefined - undefined">
 </div>"
 `;
 
 exports[`InputDate > renders with readonly correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" data-readonly="" dir="ltr">
-  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" data-readonly="" dir="ltr">
+  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" aria-readonly="true" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" aria-readonly="true" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" aria-readonly="true" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" aria-readonly="true" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" aria-readonly="true" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with separator slot correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with size lg correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-sm gap-0.75 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-sm gap-0.75 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with size md correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with size sm correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-xs gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-xs gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with size xl correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-base gap-0.75 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-base gap-0.75 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with size xs correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2 py-1 text-xs gap-0.25 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2 py-1 text-xs gap-0.25 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with trailing slot correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
-  <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with ui correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
diff --git a/test/components/__snapshots__/InputMenu-vue.spec.ts.snap b/test/components/__snapshots__/InputMenu-vue.spec.ts.snap
index ffdf2a21e1..f99d76c76f 100644
--- a/test/components/__snapshots__/InputMenu-vue.spec.ts.snap
+++ b/test/components/__snapshots__/InputMenu-vue.spec.ts.snap
@@ -1,29 +1,29 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`InputMenu > renders with ariaLabel correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" aria-label="Aria label" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" aria-label="Aria label" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -37,33 +37,33 @@ exports[`InputMenu > renders with ariaLabel correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with arrow correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
-      </div><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" class="fill-default" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span>
+      </div><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" data-slot="arrow" class="fill-default" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span>
     </div>
   </div>
   <!--teleport end-->
@@ -72,29 +72,29 @@ exports[`InputMenu > renders with arrow correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with as correctly 1`] = `
-"<section dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<section dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -108,7 +108,7 @@ exports[`InputMenu > renders with as correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with avatar and leadingIcon correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -116,7 +116,7 @@ exports[`InputMenu > renders with avatar and leadingIcon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with avatar and trailingIcon correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -124,7 +124,7 @@ exports[`InputMenu > renders with avatar and trailingIcon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with avatar correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -132,29 +132,29 @@ exports[`InputMenu > renders with avatar correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with class correctly 1`] = `
-"<div dir="ltr" class="inline-flex items-center absolute" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="inline-flex items-center absolute" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -168,29 +168,29 @@ exports[`InputMenu > renders with class correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with create-item-label slot correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -204,8 +204,8 @@ exports[`InputMenu > renders with create-item-label slot correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with default slot correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -213,17 +213,17 @@ exports[`InputMenu > renders with default slot correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with defaultValue correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="Backlog">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="Backlog">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg></span>
           </div>
         </div>
         <!--v-if-->
@@ -237,29 +237,29 @@ exports[`InputMenu > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with descriptionKey correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -273,29 +273,29 @@ exports[`InputMenu > renders with descriptionKey correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with disabled correctly 1`] = `
-"<div dir="ltr" data-disabled="" class="relative inline-flex items-center" style="pointer-events: auto;"><input disabled="" data-disabled="" aria-disabled="true" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button disabled="" type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" data-disabled="" aria-disabled="true" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-disabled="" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input disabled="" data-disabled="" aria-disabled="true" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button disabled="" type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" data-disabled="" aria-disabled="true" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -309,7 +309,7 @@ exports[`InputMenu > renders with disabled correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with icon correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -317,29 +317,29 @@ exports[`InputMenu > renders with icon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with id correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" id="id" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" id="id" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -353,20 +353,20 @@ exports[`InputMenu > renders with id correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with item slot correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
         </div>
         <!--v-if-->
       </div>
@@ -379,20 +379,20 @@ exports[`InputMenu > renders with item slot correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with item-description slot correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
         </div>
         <!--v-if-->
       </div>
@@ -405,29 +405,29 @@ exports[`InputMenu > renders with item-description slot correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with item-label slot correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Item label slot</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Item label slot</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Item label slot</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Item label slot</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Item label slot</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -441,29 +441,29 @@ exports[`InputMenu > renders with item-label slot correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with item-leading slot correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -477,29 +477,29 @@ exports[`InputMenu > renders with item-leading slot correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with item-trailing slot correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -513,29 +513,29 @@ exports[`InputMenu > renders with item-trailing slot correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with items correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -549,20 +549,20 @@ exports[`InputMenu > renders with items correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with items with description correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
         </div>
         <!--v-if-->
       </div>
@@ -575,29 +575,29 @@ exports[`InputMenu > renders with items with description correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with labelKey correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">in_progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">in_progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -611,7 +611,7 @@ exports[`InputMenu > renders with labelKey correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with leading and icon correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -619,7 +619,7 @@ exports[`InputMenu > renders with leading and icon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with leading slot correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -627,7 +627,7 @@ exports[`InputMenu > renders with leading slot correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with leadingIcon correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -635,7 +635,7 @@ exports[`InputMenu > renders with leadingIcon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with loading and avatar correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -643,7 +643,7 @@ exports[`InputMenu > renders with loading and avatar correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with loading correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -651,7 +651,7 @@ exports[`InputMenu > renders with loading correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with loading trailing and avatar correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -659,8 +659,8 @@ exports[`InputMenu > renders with loading trailing and avatar correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with loading trailing correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -668,7 +668,7 @@ exports[`InputMenu > renders with loading trailing correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with loadingIcon correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -676,17 +676,17 @@ exports[`InputMenu > renders with loadingIcon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with modelValue correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="Backlog">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="Backlog">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg></span>
           </div>
         </div>
         <!--v-if-->
@@ -700,35 +700,35 @@ exports[`InputMenu > renders with modelValue correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with multiple and modelValue correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" style="pointer-events: auto;">
-  <div dir="ltr" class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0" class="truncate">Backlog</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0" aria-current="false" data-state="inactive" type="button" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-3.5"></svg></button></div>
-  <div class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-1" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-1" class="truncate">Todo</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-1" aria-current="false" data-state="inactive" type="button" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-3.5"></svg></button></div><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" aria-disabled="false" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75" value="">
+"<div dir="ltr" data-slot="base" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" style="pointer-events: auto;">
+  <div dir="ltr" data-slot="tagsItem" class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0" data-slot="tagsItemText" class="truncate">Backlog</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0" aria-current="false" data-state="inactive" type="button" data-slot="tagsItemDelete" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tagsItemDeleteIcon" class="shrink-0 size-3.5"></svg></button></div>
+  <div data-slot="tagsItem" class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-1" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-1" data-slot="tagsItemText" class="truncate">Todo</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-1" aria-current="false" data-state="inactive" type="button" data-slot="tagsItemDelete" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tagsItemDeleteIcon" class="shrink-0 size-3.5"></svg></button></div><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" aria-disabled="false" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" data-slot="tagsInput" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75" value="">
   <!--v-if-->
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
 </div>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical" position="popper" id="reka-combobox-content-v-2" data-state="open" data-side="bottom" data-align="center">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical" position="popper" id="reka-combobox-content-v-2" data-state="open" data-side="bottom" data-align="center">
     <!--v-if-->
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
       <!--v-if-->
-      <div role="group" aria-labelledby="" id="reka-combobox-group-v-3" class="p-1 isolate">
-        <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></span>
+      <div role="group" aria-labelledby="" id="reka-combobox-group-v-3" data-slot="group" class="p-1 isolate">
+        <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg></span>
         </div>
-        <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></span>
+        <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg></span>
         </div>
-        <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div id="reka-combobox-item-v-13" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div id="reka-combobox-item-v-13" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
       <!--v-if-->
@@ -743,33 +743,33 @@ exports[`InputMenu > renders with multiple and modelValue correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with multiple correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" style="pointer-events: auto;"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" aria-disabled="false" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" dir="ltr" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75" value="">
+"<div dir="ltr" data-slot="base" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" style="pointer-events: auto;"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" aria-disabled="false" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" dir="ltr" data-slot="tagsInput" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75" value="">
   <!--v-if-->
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
 </div>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <!--v-if-->
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
       <!--v-if-->
-      <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-        <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+        <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
       <!--v-if-->
@@ -784,29 +784,29 @@ exports[`InputMenu > renders with multiple correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with name correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -820,29 +820,29 @@ exports[`InputMenu > renders with name correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with neutral variant ghost correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -856,29 +856,29 @@ exports[`InputMenu > renders with neutral variant ghost correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with neutral variant none correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -892,29 +892,29 @@ exports[`InputMenu > renders with neutral variant none correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with neutral variant outline correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -928,29 +928,29 @@ exports[`InputMenu > renders with neutral variant outline correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with neutral variant soft correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -964,29 +964,29 @@ exports[`InputMenu > renders with neutral variant soft correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with neutral variant subtle correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1000,29 +1000,29 @@ exports[`InputMenu > renders with neutral variant subtle correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with placeholder correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" placeholder="Search..." value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" placeholder="Search..." value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1036,29 +1036,29 @@ exports[`InputMenu > renders with placeholder correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with primary variant ghost correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1072,29 +1072,29 @@ exports[`InputMenu > renders with primary variant ghost correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with primary variant none correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1108,29 +1108,29 @@ exports[`InputMenu > renders with primary variant none correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with primary variant outline correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1144,29 +1144,29 @@ exports[`InputMenu > renders with primary variant outline correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with primary variant soft correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1180,29 +1180,29 @@ exports[`InputMenu > renders with primary variant soft correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with primary variant subtle correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1216,29 +1216,29 @@ exports[`InputMenu > renders with primary variant subtle correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with required correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" required="" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" required="" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1252,29 +1252,29 @@ exports[`InputMenu > renders with required correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with selectedIcon correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1288,29 +1288,29 @@ exports[`InputMenu > renders with selectedIcon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with size lg correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-10" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-10" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1324,29 +1324,29 @@ exports[`InputMenu > renders with size lg correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with size md correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1360,29 +1360,29 @@ exports[`InputMenu > renders with size md correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with size sm correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-8" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-4"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-8" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-4"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1396,29 +1396,29 @@ exports[`InputMenu > renders with size sm correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with size xl correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-11" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-6"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-11" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-6"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1432,29 +1432,29 @@ exports[`InputMenu > renders with size xl correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with size xs correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-7" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-4"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-7" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-4"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1468,8 +1468,8 @@ exports[`InputMenu > renders with size xs correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with trailing and icon correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -1477,8 +1477,8 @@ exports[`InputMenu > renders with trailing and icon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with trailing slot correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5">Trailing slot</button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5">Trailing slot</button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -1486,8 +1486,8 @@ exports[`InputMenu > renders with trailing slot correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with trailingIcon correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -1495,29 +1495,29 @@ exports[`InputMenu > renders with trailingIcon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with trailingIcon correctly 2`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1531,29 +1531,29 @@ exports[`InputMenu > renders with trailingIcon correctly 2`] = `
 `;
 
 exports[`InputMenu > renders with ui correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="isolate p-2">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="isolate p-2">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1567,29 +1567,29 @@ exports[`InputMenu > renders with ui correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with valueKey correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1603,13 +1603,13 @@ exports[`InputMenu > renders with valueKey correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with virtualize correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-      <div class="text-center text-muted p-1.5 text-sm">No data</div>
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 p-1 isolate">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+      <div data-slot="empty" class="text-center text-muted p-1.5 text-sm">No data</div>
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 p-1 isolate">
         <!--v-if-->
         <div data-reka-virtualizer="" style="position: relative; width: 100%; height: 160px;"></div>
         <!--v-if-->
diff --git a/test/components/__snapshots__/InputMenu.spec.ts.snap b/test/components/__snapshots__/InputMenu.spec.ts.snap
index 7ed8165299..807b7f13d7 100644
--- a/test/components/__snapshots__/InputMenu.spec.ts.snap
+++ b/test/components/__snapshots__/InputMenu.spec.ts.snap
@@ -1,29 +1,29 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`InputMenu > renders with ariaLabel correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" aria-label="Aria label" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" aria-label="Aria label" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -37,33 +37,33 @@ exports[`InputMenu > renders with ariaLabel correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with arrow correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
-      </div><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" class="fill-default" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span>
+      </div><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" data-slot="arrow" class="fill-default" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span>
     </div>
   </div>
   <!--teleport end-->
@@ -72,29 +72,29 @@ exports[`InputMenu > renders with arrow correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with as correctly 1`] = `
-"<section dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<section dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -108,7 +108,7 @@ exports[`InputMenu > renders with as correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with avatar and leadingIcon correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -116,7 +116,7 @@ exports[`InputMenu > renders with avatar and leadingIcon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with avatar and trailingIcon correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -124,7 +124,7 @@ exports[`InputMenu > renders with avatar and trailingIcon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with avatar correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -132,29 +132,29 @@ exports[`InputMenu > renders with avatar correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with class correctly 1`] = `
-"<div dir="ltr" class="inline-flex items-center absolute" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="inline-flex items-center absolute" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -168,29 +168,29 @@ exports[`InputMenu > renders with class correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with create-item-label slot correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -204,8 +204,8 @@ exports[`InputMenu > renders with create-item-label slot correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with default slot correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -213,29 +213,29 @@ exports[`InputMenu > renders with default slot correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with defaultValue correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="Backlog" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="Backlog" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true"></span></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -249,29 +249,29 @@ exports[`InputMenu > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with descriptionKey correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -285,29 +285,29 @@ exports[`InputMenu > renders with descriptionKey correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with disabled correctly 1`] = `
-"<div dir="ltr" data-disabled="" class="relative inline-flex items-center" style="pointer-events: auto;"><input disabled="" data-disabled="" aria-disabled="true" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button disabled="" type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" data-disabled="" aria-disabled="true" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-disabled="" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input disabled="" data-disabled="" aria-disabled="true" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button disabled="" type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" data-disabled="" aria-disabled="true" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -321,7 +321,7 @@ exports[`InputMenu > renders with disabled correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with icon correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -329,29 +329,29 @@ exports[`InputMenu > renders with icon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with id correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" id="id" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" id="id" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -365,20 +365,20 @@ exports[`InputMenu > renders with id correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with item slot correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted="">Item slot</div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted="">Item slot</div>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
         </div>
         <!--v-if-->
       </div>
@@ -391,20 +391,20 @@ exports[`InputMenu > renders with item slot correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with item-description slot correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
         </div>
         <!--v-if-->
       </div>
@@ -417,29 +417,29 @@ exports[`InputMenu > renders with item-description slot correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with item-label slot correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Item label slot</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Item label slot</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Item label slot</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Item label slot</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Item label slot</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -453,29 +453,29 @@ exports[`InputMenu > renders with item-label slot correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with item-leading slot correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted="">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted="">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -489,29 +489,29 @@ exports[`InputMenu > renders with item-leading slot correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with item-trailing slot correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -525,29 +525,29 @@ exports[`InputMenu > renders with item-trailing slot correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with items correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -561,20 +561,20 @@ exports[`InputMenu > renders with items correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with items with description correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
         </div>
         <!--v-if-->
       </div>
@@ -587,29 +587,29 @@ exports[`InputMenu > renders with items with description correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with labelKey correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">in_progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">in_progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -623,7 +623,7 @@ exports[`InputMenu > renders with labelKey correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with leading and icon correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -631,7 +631,7 @@ exports[`InputMenu > renders with leading and icon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with leading slot correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -639,7 +639,7 @@ exports[`InputMenu > renders with leading slot correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with leadingIcon correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -647,7 +647,7 @@ exports[`InputMenu > renders with leadingIcon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with loading and avatar correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -655,7 +655,7 @@ exports[`InputMenu > renders with loading and avatar correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with loading correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -663,7 +663,7 @@ exports[`InputMenu > renders with loading correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with loading trailing and avatar correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -671,8 +671,8 @@ exports[`InputMenu > renders with loading trailing and avatar correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with loading trailing correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -680,7 +680,7 @@ exports[`InputMenu > renders with loading trailing correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with loadingIcon correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -688,29 +688,29 @@ exports[`InputMenu > renders with loadingIcon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with modelValue correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="Backlog" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="Backlog" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true"></span></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -724,35 +724,35 @@ exports[`InputMenu > renders with modelValue correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with multiple and modelValue correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" style="pointer-events: auto;">
-  <div dir="ltr" class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0-0-0" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0-0-0" class="truncate">Backlog</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0-0-0" aria-current="false" data-state="inactive" type="button" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><span class="iconify i-lucide:x shrink-0 size-3.5" aria-hidden="true"></span></button></div>
-  <div class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0-0-1" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0-0-1" class="truncate">Todo</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0-0-1" aria-current="false" data-state="inactive" type="button" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><span class="iconify i-lucide:x shrink-0 size-3.5" aria-hidden="true"></span></button></div><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" aria-disabled="false" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75" value="" aria-activedescendant="reka-combobox-item-v-0-0-5">
+"<div dir="ltr" data-slot="base" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" style="pointer-events: auto;">
+  <div dir="ltr" data-slot="tagsItem" class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0-0-0" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0-0-0" data-slot="tagsItemText" class="truncate">Backlog</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0-0-0" aria-current="false" data-state="inactive" type="button" data-slot="tagsItemDelete" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><span class="iconify i-lucide:x shrink-0 size-3.5" aria-hidden="true" data-slot="tagsItemDeleteIcon"></span></button></div>
+  <div data-slot="tagsItem" class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0-0-1" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0-0-1" data-slot="tagsItemText" class="truncate">Todo</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0-0-1" aria-current="false" data-state="inactive" type="button" data-slot="tagsItemDelete" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><span class="iconify i-lucide:x shrink-0 size-3.5" aria-hidden="true" data-slot="tagsItemDeleteIcon"></span></button></div><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" aria-disabled="false" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" data-slot="tagsInput" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75" value="" aria-activedescendant="reka-combobox-item-v-0-0-5">
   <!--v-if-->
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
 </div>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-2" data-state="open" data-side="bottom" data-align="center">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-2" data-state="open" data-side="bottom" data-align="center">
     <!--v-if-->
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
       <!--v-if-->
-      <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-3" class="p-1 isolate">
-        <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true"></span></span>
+      <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-3" data-slot="group" class="p-1 isolate">
+        <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span></span>
         </div>
-        <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true"></span></span>
+        <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span></span>
         </div>
-        <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div id="reka-combobox-item-v-0-0-13" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div id="reka-combobox-item-v-0-0-13" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
       <!--v-if-->
@@ -767,33 +767,33 @@ exports[`InputMenu > renders with multiple and modelValue correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with multiple correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" style="pointer-events: auto;"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" aria-disabled="false" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" dir="ltr" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+"<div dir="ltr" data-slot="base" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" style="pointer-events: auto;"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" aria-disabled="false" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" dir="ltr" data-slot="tagsInput" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
   <!--v-if-->
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
 </div>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
     <!--v-if-->
-    <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+    <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
       <!--v-if-->
-      <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-        <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
       <!--v-if-->
@@ -808,29 +808,29 @@ exports[`InputMenu > renders with multiple correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with name correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -844,29 +844,29 @@ exports[`InputMenu > renders with name correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with neutral variant ghost correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -880,29 +880,29 @@ exports[`InputMenu > renders with neutral variant ghost correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with neutral variant none correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -916,29 +916,29 @@ exports[`InputMenu > renders with neutral variant none correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with neutral variant outline correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -952,29 +952,29 @@ exports[`InputMenu > renders with neutral variant outline correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with neutral variant soft correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -988,29 +988,29 @@ exports[`InputMenu > renders with neutral variant soft correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with neutral variant subtle correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1024,29 +1024,29 @@ exports[`InputMenu > renders with neutral variant subtle correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with placeholder correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" placeholder="Search..." value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" placeholder="Search..." value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1060,29 +1060,29 @@ exports[`InputMenu > renders with placeholder correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with primary variant ghost correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1096,29 +1096,29 @@ exports[`InputMenu > renders with primary variant ghost correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with primary variant none correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1132,29 +1132,29 @@ exports[`InputMenu > renders with primary variant none correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with primary variant outline correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1168,29 +1168,29 @@ exports[`InputMenu > renders with primary variant outline correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with primary variant soft correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1204,29 +1204,29 @@ exports[`InputMenu > renders with primary variant soft correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with primary variant subtle correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1240,29 +1240,29 @@ exports[`InputMenu > renders with primary variant subtle correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with required correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" required="" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" required="" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1276,29 +1276,29 @@ exports[`InputMenu > renders with required correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with selectedIcon correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1312,29 +1312,29 @@ exports[`InputMenu > renders with selectedIcon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with size lg correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-10" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-3"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-10" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-3"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1348,29 +1348,29 @@ exports[`InputMenu > renders with size lg correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with size md correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1384,29 +1384,29 @@ exports[`InputMenu > renders with size md correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with size sm correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-8" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-4" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-8" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-4" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1420,29 +1420,29 @@ exports[`InputMenu > renders with size sm correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with size xl correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-11" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-3"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-6" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-11" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-3"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-6" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1456,29 +1456,29 @@ exports[`InputMenu > renders with size xl correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with size xs correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-7" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-4" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-7" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-4" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1492,8 +1492,8 @@ exports[`InputMenu > renders with size xs correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with trailing and icon correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -1501,8 +1501,8 @@ exports[`InputMenu > renders with trailing and icon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with trailing slot correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5">Trailing slot</button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5">Trailing slot</button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -1510,8 +1510,8 @@ exports[`InputMenu > renders with trailing slot correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with trailingIcon correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <!--teleport end-->
   <!--v-if-->
@@ -1519,29 +1519,29 @@ exports[`InputMenu > renders with trailingIcon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with trailingIcon correctly 2`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1555,29 +1555,29 @@ exports[`InputMenu > renders with trailingIcon correctly 2`] = `
 `;
 
 exports[`InputMenu > renders with ui correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="isolate p-2">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="isolate p-2">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1591,29 +1591,29 @@ exports[`InputMenu > renders with ui correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with valueKey correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1627,13 +1627,13 @@ exports[`InputMenu > renders with valueKey correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with virtualize correctly 1`] = `
-"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-      <div class="text-center text-muted p-1.5 text-sm">No data</div>
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 p-1 isolate">
+    <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+      <div data-slot="empty" class="text-center text-muted p-1.5 text-sm">No data</div>
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 p-1 isolate">
         <!--v-if-->
         <div data-reka-virtualizer="" style="position: relative; width: 100%; height: 160px;"></div>
         <!--v-if-->
diff --git a/test/components/__snapshots__/InputNumber-vue.spec.ts.snap b/test/components/__snapshots__/InputNumber-vue.spec.ts.snap
index b70e1f67db..77eba86c25 100644
--- a/test/components/__snapshots__/InputNumber-vue.spec.ts.snap
+++ b/test/components/__snapshots__/InputNumber-vue.spec.ts.snap
@@ -1,12 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`InputNumber > renders with .optional modifier correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -15,12 +15,12 @@ exports[`InputNumber > renders with .optional modifier correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with ariaLabel correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" aria-label="Aria label" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" aria-label="Aria label" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -29,12 +29,12 @@ exports[`InputNumber > renders with ariaLabel correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with as correctly 1`] = `
-"<section class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<section data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -43,12 +43,12 @@ exports[`InputNumber > renders with as correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with class correctly 1`] = `
-"<div class="inline-flex items-center absolute" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root" class="inline-flex items-center absolute" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -57,23 +57,23 @@ exports[`InputNumber > renders with class correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with decrement slot correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1">-</div>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1">-</div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`InputNumber > renders with decrementIcon correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -82,12 +82,12 @@ exports[`InputNumber > renders with decrementIcon correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with disabled correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group" data-disabled=""><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" disabled="" data-disabled="" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" disabled="" tabindex="-1" aria-label="Increment" data-disabled="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group" data-disabled=""><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" disabled="" data-disabled="" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" disabled="" tabindex="-1" aria-label="Increment" data-disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" disabled="" tabindex="-1" aria-label="Decrement" data-disabled="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" disabled="" tabindex="-1" aria-label="Decrement" data-disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -96,9 +96,9 @@ exports[`InputNumber > renders with disabled correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with increment slot correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1">+</div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1">+</div>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -107,12 +107,12 @@ exports[`InputNumber > renders with increment slot correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with incrementIcon correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -121,12 +121,12 @@ exports[`InputNumber > renders with incrementIcon correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with name correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -135,12 +135,12 @@ exports[`InputNumber > renders with name correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent text-center ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent text-center ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -149,12 +149,12 @@ exports[`InputNumber > renders with neutral variant ghost correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant none correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent text-center ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent text-center ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -163,12 +163,12 @@ exports[`InputNumber > renders with neutral variant none correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -177,12 +177,12 @@ exports[`InputNumber > renders with neutral variant outline correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 text-center ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 text-center ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -191,12 +191,12 @@ exports[`InputNumber > renders with neutral variant soft correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -205,12 +205,12 @@ exports[`InputNumber > renders with neutral variant subtle correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with orientation vertical correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <div class="absolute flex items-center top-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center top-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center bottom-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="decrement" class="absolute flex items-center bottom-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -219,12 +219,12 @@ exports[`InputNumber > renders with orientation vertical correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with placeholder correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" placeholder="Number..." class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" placeholder="Number..." data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -233,12 +233,12 @@ exports[`InputNumber > renders with placeholder correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent text-center ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent text-center ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -247,12 +247,12 @@ exports[`InputNumber > renders with primary variant ghost correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant none correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent text-center ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent text-center ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -261,12 +261,12 @@ exports[`InputNumber > renders with primary variant none correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -275,12 +275,12 @@ exports[`InputNumber > renders with primary variant outline correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 text-center ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 text-center ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -289,12 +289,12 @@ exports[`InputNumber > renders with primary variant soft correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -303,12 +303,12 @@ exports[`InputNumber > renders with primary variant subtle correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with required correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" required="" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" required="" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -317,12 +317,12 @@ exports[`InputNumber > renders with required correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size lg correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-10 pe-10" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-10 pe-10" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -331,12 +331,12 @@ exports[`InputNumber > renders with size lg correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size md correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -345,12 +345,12 @@ exports[`InputNumber > renders with size md correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size sm correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-8 pe-8" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-8 pe-8" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -359,12 +359,12 @@ exports[`InputNumber > renders with size sm correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size xl correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-11 pe-11" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-6"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-11 pe-11" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-6"></svg>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -373,12 +373,12 @@ exports[`InputNumber > renders with size xl correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size xs correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-7 pe-7" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-7 pe-7" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -387,12 +387,12 @@ exports[`InputNumber > renders with size xs correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with ui correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9 rounded-full" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9 rounded-full" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -401,8 +401,8 @@ exports[`InputNumber > renders with ui correctly 1`] = `
 `;
 
 exports[`InputNumber > renders without decrement correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary text-start pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary text-start pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -412,8 +412,8 @@ exports[`InputNumber > renders without decrement correctly 1`] = `
 `;
 
 exports[`InputNumber > renders without decrement vertical correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <div class="absolute flex items-center top-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center top-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -423,7 +423,7 @@ exports[`InputNumber > renders without decrement vertical correctly 1`] = `
 `;
 
 exports[`InputNumber > renders without increment and decrement correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary text-start" value="">
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary text-start" value="">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -431,7 +431,7 @@ exports[`InputNumber > renders without increment and decrement correctly 1`] = `
 `;
 
 exports[`InputNumber > renders without increment and decrement vertical correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" value="">
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" value="">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -439,9 +439,9 @@ exports[`InputNumber > renders without increment and decrement vertical correctl
 `;
 
 exports[`InputNumber > renders without increment correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" value="">
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" value="">
   <!--v-if-->
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -450,9 +450,9 @@ exports[`InputNumber > renders without increment correctly 1`] = `
 `;
 
 exports[`InputNumber > renders without increment vertical correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
   <!--v-if-->
-  <div class="absolute flex items-center bottom-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="decrement" class="absolute flex items-center bottom-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
diff --git a/test/components/__snapshots__/InputNumber.spec.ts.snap b/test/components/__snapshots__/InputNumber.spec.ts.snap
index d3db1af8f8..4f3f8deaec 100644
--- a/test/components/__snapshots__/InputNumber.spec.ts.snap
+++ b/test/components/__snapshots__/InputNumber.spec.ts.snap
@@ -1,12 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`InputNumber > renders with .optional modifier correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -15,12 +15,12 @@ exports[`InputNumber > renders with .optional modifier correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with ariaLabel correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" aria-label="Aria label" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" aria-label="Aria label" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -29,12 +29,12 @@ exports[`InputNumber > renders with ariaLabel correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with as correctly 1`] = `
-"<section class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<section data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -43,12 +43,12 @@ exports[`InputNumber > renders with as correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with class correctly 1`] = `
-"<div class="inline-flex items-center absolute" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root" class="inline-flex items-center absolute" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -57,23 +57,23 @@ exports[`InputNumber > renders with class correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with decrement slot correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1">-</div>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1">-</div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`InputNumber > renders with decrementIcon correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -82,12 +82,12 @@ exports[`InputNumber > renders with decrementIcon correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with disabled correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group" data-disabled=""><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" disabled="" data-disabled="" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" disabled="" tabindex="-1" aria-label="Increment" data-disabled="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group" data-disabled=""><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" disabled="" data-disabled="" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" disabled="" tabindex="-1" aria-label="Increment" data-disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" disabled="" tabindex="-1" aria-label="Decrement" data-disabled="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" disabled="" tabindex="-1" aria-label="Decrement" data-disabled="" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -96,9 +96,9 @@ exports[`InputNumber > renders with disabled correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with increment slot correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1">+</div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1">+</div>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -107,12 +107,12 @@ exports[`InputNumber > renders with increment slot correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with incrementIcon correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -121,12 +121,12 @@ exports[`InputNumber > renders with incrementIcon correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with name correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -135,12 +135,12 @@ exports[`InputNumber > renders with name correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent text-center ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent text-center ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -149,12 +149,12 @@ exports[`InputNumber > renders with neutral variant ghost correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant none correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent text-center ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent text-center ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -163,12 +163,12 @@ exports[`InputNumber > renders with neutral variant none correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -177,12 +177,12 @@ exports[`InputNumber > renders with neutral variant outline correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 text-center ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 text-center ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -191,12 +191,12 @@ exports[`InputNumber > renders with neutral variant soft correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -205,12 +205,12 @@ exports[`InputNumber > renders with neutral variant subtle correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with orientation vertical correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <div class="absolute flex items-center top-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-up shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center top-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-up shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center bottom-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-down shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center bottom-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-down shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -219,12 +219,12 @@ exports[`InputNumber > renders with orientation vertical correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with placeholder correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" placeholder="Number..." class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" placeholder="Number..." data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -233,12 +233,12 @@ exports[`InputNumber > renders with placeholder correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent text-center ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent text-center ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -247,12 +247,12 @@ exports[`InputNumber > renders with primary variant ghost correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant none correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent text-center ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent text-center ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -261,12 +261,12 @@ exports[`InputNumber > renders with primary variant none correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -275,12 +275,12 @@ exports[`InputNumber > renders with primary variant outline correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 text-center ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 text-center ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -289,12 +289,12 @@ exports[`InputNumber > renders with primary variant soft correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -303,12 +303,12 @@ exports[`InputNumber > renders with primary variant subtle correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with required correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" required="" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" required="" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -317,12 +317,12 @@ exports[`InputNumber > renders with required correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size lg correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-10 pe-10" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-2"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-10 pe-10" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-2"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-2"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-2"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -331,12 +331,12 @@ exports[`InputNumber > renders with size lg correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size md correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -345,12 +345,12 @@ exports[`InputNumber > renders with size md correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size sm correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-8 pe-8" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-4" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-8 pe-8" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-4" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -359,12 +359,12 @@ exports[`InputNumber > renders with size sm correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size xl correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-11 pe-11" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-2"><span class="iconify i-lucide:plus shrink-0 size-6" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-11 pe-11" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-2"><span class="iconify i-lucide:plus shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-2"><span class="iconify i-lucide:minus shrink-0 size-6" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-2"><span class="iconify i-lucide:minus shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -373,12 +373,12 @@ exports[`InputNumber > renders with size xl correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size xs correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-7 pe-7" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1"><span class="iconify i-lucide:plus shrink-0 size-4" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-7 pe-7" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1"><span class="iconify i-lucide:plus shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1"><span class="iconify i-lucide:minus shrink-0 size-4" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1"><span class="iconify i-lucide:minus shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -387,12 +387,12 @@ exports[`InputNumber > renders with size xs correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with ui correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9 rounded-full" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9 rounded-full" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -401,8 +401,8 @@ exports[`InputNumber > renders with ui correctly 1`] = `
 `;
 
 exports[`InputNumber > renders without decrement correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary text-start pe-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary text-start pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -412,8 +412,8 @@ exports[`InputNumber > renders without decrement correctly 1`] = `
 `;
 
 exports[`InputNumber > renders without decrement vertical correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
-  <div class="absolute flex items-center top-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-up shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <div data-slot="increment" class="absolute flex items-center top-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Increment" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-up shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -423,7 +423,7 @@ exports[`InputNumber > renders without decrement vertical correctly 1`] = `
 `;
 
 exports[`InputNumber > renders without increment and decrement correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary text-start" value="">
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary text-start" value="">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -431,7 +431,7 @@ exports[`InputNumber > renders without increment and decrement correctly 1`] = `
 `;
 
 exports[`InputNumber > renders without increment and decrement vertical correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" value="">
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" value="">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -439,9 +439,9 @@ exports[`InputNumber > renders without increment and decrement vertical correctl
 `;
 
 exports[`InputNumber > renders without increment correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" value="">
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" value="">
   <!--v-if-->
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -450,9 +450,9 @@ exports[`InputNumber > renders without increment correctly 1`] = `
 `;
 
 exports[`InputNumber > renders without increment vertical correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+"<div data-slot="root" class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" data-slot="base" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
   <!--v-if-->
-  <div class="absolute flex items-center bottom-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-down shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="decrement" class="absolute flex items-center bottom-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Decrement" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-down shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
diff --git a/test/components/__snapshots__/InputTags-vue.spec.ts.snap b/test/components/__snapshots__/InputTags-vue.spec.ts.snap
index 290df717a7..4c712fb8e7 100644
--- a/test/components/__snapshots__/InputTags-vue.spec.ts.snap
+++ b/test/components/__snapshots__/InputTags-vue.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`InputTags > renders with ariaLabel correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" aria-label="Aria label" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" aria-label="Aria label" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -9,7 +9,7 @@ exports[`InputTags > renders with ariaLabel correctly 1`] = `
 `;
 
 exports[`InputTags > renders with as correctly 1`] = `
-"<section class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<section data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -17,7 +17,7 @@ exports[`InputTags > renders with as correctly 1`] = `
 `;
 
 exports[`InputTags > renders with class correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -25,7 +25,7 @@ exports[`InputTags > renders with class correctly 1`] = `
 `;
 
 exports[`InputTags > renders with default slot correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">Default slot
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">Default slot
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -33,8 +33,8 @@ exports[`InputTags > renders with default slot correctly 1`] = `
 `;
 
 exports[`InputTags > renders with defaultValue correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr">
-  <div class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 wrap-anywhere data-[state=&quot;active&quot;]:bg-accented text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0" class="">test</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0" aria-current="false" data-state="inactive" type="button" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-3.5"></svg></button></div><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr">
+  <div data-slot="item" class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 wrap-anywhere data-[state=&quot;active&quot;]:bg-accented text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0" data-slot="itemText" class="">test</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0" aria-current="false" data-state="inactive" type="button" data-slot="itemDelete" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemDeleteIcon" class="shrink-0 size-3.5"></svg></button></div><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -42,7 +42,7 @@ exports[`InputTags > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`InputTags > renders with disabled correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr" data-disabled=""><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" disabled="" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr" data-disabled=""><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" disabled="" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -50,14 +50,14 @@ exports[`InputTags > renders with disabled correctly 1`] = `
 `;
 
 exports[`InputTags > renders with icon correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`InputTags > renders with id correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input id="id" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input id="id" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -65,7 +65,7 @@ exports[`InputTags > renders with id correctly 1`] = `
 `;
 
 exports[`InputTags > renders with item-delete slot correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -73,7 +73,7 @@ exports[`InputTags > renders with item-delete slot correctly 1`] = `
 `;
 
 exports[`InputTags > renders with item-text slot correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -81,36 +81,36 @@ exports[`InputTags > renders with item-text slot correctly 1`] = `
 `;
 
 exports[`InputTags > renders with leading slot correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span>
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`InputTags > renders with loading correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`InputTags > renders with loading trailing correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
-  <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+  <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`InputTags > renders with loadingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`InputTags > renders with modelValue correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr">
-  <div class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 wrap-anywhere data-[state=&quot;active&quot;]:bg-accented text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0" class="">test</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0" aria-current="false" data-state="inactive" type="button" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-3.5"></svg></button></div><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr">
+  <div data-slot="item" class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 wrap-anywhere data-[state=&quot;active&quot;]:bg-accented text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0" data-slot="itemText" class="">test</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0" aria-current="false" data-state="inactive" type="button" data-slot="itemDelete" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemDeleteIcon" class="shrink-0 size-3.5"></svg></button></div><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -118,7 +118,7 @@ exports[`InputTags > renders with modelValue correctly 1`] = `
 `;
 
 exports[`InputTags > renders with name correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -126,7 +126,7 @@ exports[`InputTags > renders with name correctly 1`] = `
 `;
 
 exports[`InputTags > renders with neutral variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -134,7 +134,7 @@ exports[`InputTags > renders with neutral variant ghost correctly 1`] = `
 `;
 
 exports[`InputTags > renders with neutral variant none correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -142,7 +142,7 @@ exports[`InputTags > renders with neutral variant none correctly 1`] = `
 `;
 
 exports[`InputTags > renders with neutral variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-inverted" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-inverted" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -150,7 +150,7 @@ exports[`InputTags > renders with neutral variant outline correctly 1`] = `
 `;
 
 exports[`InputTags > renders with neutral variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -158,7 +158,7 @@ exports[`InputTags > renders with neutral variant soft correctly 1`] = `
 `;
 
 exports[`InputTags > renders with neutral variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-inverted" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-inverted" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -166,7 +166,7 @@ exports[`InputTags > renders with neutral variant subtle correctly 1`] = `
 `;
 
 exports[`InputTags > renders with placeholder correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="Search..." class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="Search..." data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -174,7 +174,7 @@ exports[`InputTags > renders with placeholder correctly 1`] = `
 `;
 
 exports[`InputTags > renders with primary variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -182,7 +182,7 @@ exports[`InputTags > renders with primary variant ghost correctly 1`] = `
 `;
 
 exports[`InputTags > renders with primary variant none correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -190,7 +190,7 @@ exports[`InputTags > renders with primary variant none correctly 1`] = `
 `;
 
 exports[`InputTags > renders with primary variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -198,7 +198,7 @@ exports[`InputTags > renders with primary variant outline correctly 1`] = `
 `;
 
 exports[`InputTags > renders with primary variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -206,7 +206,7 @@ exports[`InputTags > renders with primary variant soft correctly 1`] = `
 `;
 
 exports[`InputTags > renders with primary variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -214,7 +214,7 @@ exports[`InputTags > renders with primary variant subtle correctly 1`] = `
 `;
 
 exports[`InputTags > renders with required correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -222,7 +222,7 @@ exports[`InputTags > renders with required correctly 1`] = `
 `;
 
 exports[`InputTags > renders with size lg correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -230,7 +230,7 @@ exports[`InputTags > renders with size lg correctly 1`] = `
 `;
 
 exports[`InputTags > renders with size md correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -238,7 +238,7 @@ exports[`InputTags > renders with size md correctly 1`] = `
 `;
 
 exports[`InputTags > renders with size sm correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -246,7 +246,7 @@ exports[`InputTags > renders with size sm correctly 1`] = `
 `;
 
 exports[`InputTags > renders with size xl correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -254,7 +254,7 @@ exports[`InputTags > renders with size xl correctly 1`] = `
 `;
 
 exports[`InputTags > renders with size xs correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -262,28 +262,28 @@ exports[`InputTags > renders with size xs correctly 1`] = `
 `;
 
 exports[`InputTags > renders with trailing and icon correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
-  <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+  <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`InputTags > renders with trailing slot correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
-  <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span>
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+  <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`InputTags > renders with trailingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
-  <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+  <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`InputTags > renders with ui correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
diff --git a/test/components/__snapshots__/InputTags.spec.ts.snap b/test/components/__snapshots__/InputTags.spec.ts.snap
index 218460804a..8f8ef62102 100644
--- a/test/components/__snapshots__/InputTags.spec.ts.snap
+++ b/test/components/__snapshots__/InputTags.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`InputTags > renders with ariaLabel correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" aria-label="Aria label" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" aria-label="Aria label" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -9,7 +9,7 @@ exports[`InputTags > renders with ariaLabel correctly 1`] = `
 `;
 
 exports[`InputTags > renders with as correctly 1`] = `
-"<section class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<section data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -17,7 +17,7 @@ exports[`InputTags > renders with as correctly 1`] = `
 `;
 
 exports[`InputTags > renders with class correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -25,7 +25,7 @@ exports[`InputTags > renders with class correctly 1`] = `
 `;
 
 exports[`InputTags > renders with default slot correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">Default slot
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">Default slot
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -33,8 +33,8 @@ exports[`InputTags > renders with default slot correctly 1`] = `
 `;
 
 exports[`InputTags > renders with defaultValue correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr">
-  <div class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 wrap-anywhere data-[state=&quot;active&quot;]:bg-accented text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0-0-0" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0-0-0" class="">test</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0-0-0" aria-current="false" data-state="inactive" type="button" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><span class="iconify i-lucide:x shrink-0 size-3.5" aria-hidden="true"></span></button></div><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr">
+  <div data-slot="item" class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 wrap-anywhere data-[state=&quot;active&quot;]:bg-accented text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0-0-0" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0-0-0" data-slot="itemText" class="">test</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0-0-0" aria-current="false" data-state="inactive" type="button" data-slot="itemDelete" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><span class="iconify i-lucide:x shrink-0 size-3.5" aria-hidden="true" data-slot="itemDeleteIcon"></span></button></div><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -42,7 +42,7 @@ exports[`InputTags > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`InputTags > renders with disabled correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr" data-disabled=""><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" disabled="" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr" data-disabled=""><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" disabled="" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -50,14 +50,14 @@ exports[`InputTags > renders with disabled correctly 1`] = `
 `;
 
 exports[`InputTags > renders with icon correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`InputTags > renders with id correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input id="id" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input id="id" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -65,7 +65,7 @@ exports[`InputTags > renders with id correctly 1`] = `
 `;
 
 exports[`InputTags > renders with item-delete slot correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -73,7 +73,7 @@ exports[`InputTags > renders with item-delete slot correctly 1`] = `
 `;
 
 exports[`InputTags > renders with item-text slot correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -81,36 +81,36 @@ exports[`InputTags > renders with item-text slot correctly 1`] = `
 `;
 
 exports[`InputTags > renders with leading slot correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span>
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`InputTags > renders with loading correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`InputTags > renders with loading trailing correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
-  <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+  <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="trailingIcon"></span></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`InputTags > renders with loadingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`InputTags > renders with modelValue correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr">
-  <div class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 wrap-anywhere data-[state=&quot;active&quot;]:bg-accented text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0-0-0" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0-0-0" class="">test</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0-0-0" aria-current="false" data-state="inactive" type="button" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><span class="iconify i-lucide:x shrink-0 size-3.5" aria-hidden="true"></span></button></div><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr">
+  <div data-slot="item" class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 wrap-anywhere data-[state=&quot;active&quot;]:bg-accented text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0-0-0" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0-0-0" data-slot="itemText" class="">test</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0-0-0" aria-current="false" data-state="inactive" type="button" data-slot="itemDelete" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><span class="iconify i-lucide:x shrink-0 size-3.5" aria-hidden="true" data-slot="itemDeleteIcon"></span></button></div><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -118,7 +118,7 @@ exports[`InputTags > renders with modelValue correctly 1`] = `
 `;
 
 exports[`InputTags > renders with name correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -126,7 +126,7 @@ exports[`InputTags > renders with name correctly 1`] = `
 `;
 
 exports[`InputTags > renders with neutral variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -134,7 +134,7 @@ exports[`InputTags > renders with neutral variant ghost correctly 1`] = `
 `;
 
 exports[`InputTags > renders with neutral variant none correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -142,7 +142,7 @@ exports[`InputTags > renders with neutral variant none correctly 1`] = `
 `;
 
 exports[`InputTags > renders with neutral variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-inverted" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-inverted" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -150,7 +150,7 @@ exports[`InputTags > renders with neutral variant outline correctly 1`] = `
 `;
 
 exports[`InputTags > renders with neutral variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -158,7 +158,7 @@ exports[`InputTags > renders with neutral variant soft correctly 1`] = `
 `;
 
 exports[`InputTags > renders with neutral variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-inverted" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-inverted" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -166,7 +166,7 @@ exports[`InputTags > renders with neutral variant subtle correctly 1`] = `
 `;
 
 exports[`InputTags > renders with placeholder correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="Search..." class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="Search..." data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -174,7 +174,7 @@ exports[`InputTags > renders with placeholder correctly 1`] = `
 `;
 
 exports[`InputTags > renders with primary variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -182,7 +182,7 @@ exports[`InputTags > renders with primary variant ghost correctly 1`] = `
 `;
 
 exports[`InputTags > renders with primary variant none correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -190,7 +190,7 @@ exports[`InputTags > renders with primary variant none correctly 1`] = `
 `;
 
 exports[`InputTags > renders with primary variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -198,7 +198,7 @@ exports[`InputTags > renders with primary variant outline correctly 1`] = `
 `;
 
 exports[`InputTags > renders with primary variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -206,7 +206,7 @@ exports[`InputTags > renders with primary variant soft correctly 1`] = `
 `;
 
 exports[`InputTags > renders with primary variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -214,7 +214,7 @@ exports[`InputTags > renders with primary variant subtle correctly 1`] = `
 `;
 
 exports[`InputTags > renders with required correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -222,7 +222,7 @@ exports[`InputTags > renders with required correctly 1`] = `
 `;
 
 exports[`InputTags > renders with size lg correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -230,7 +230,7 @@ exports[`InputTags > renders with size lg correctly 1`] = `
 `;
 
 exports[`InputTags > renders with size md correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -238,7 +238,7 @@ exports[`InputTags > renders with size md correctly 1`] = `
 `;
 
 exports[`InputTags > renders with size sm correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -246,7 +246,7 @@ exports[`InputTags > renders with size sm correctly 1`] = `
 `;
 
 exports[`InputTags > renders with size xl correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -254,7 +254,7 @@ exports[`InputTags > renders with size xl correctly 1`] = `
 `;
 
 exports[`InputTags > renders with size xs correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -262,28 +262,28 @@ exports[`InputTags > renders with size xs correctly 1`] = `
 `;
 
 exports[`InputTags > renders with trailing and icon correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
-  <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+  <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`InputTags > renders with trailing slot correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
-  <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span>
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+  <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`InputTags > renders with trailingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
-  <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+  <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`InputTags > renders with ui correctly 1`] = `
-"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+"<div data-slot="root" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" data-slot="input" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
diff --git a/test/components/__snapshots__/InputTime-vue.spec.ts.snap b/test/components/__snapshots__/InputTime-vue.spec.ts.snap
index be44c9ae4e..a155b2c58c 100644
--- a/test/components/__snapshots__/InputTime-vue.spec.ts.snap
+++ b/test/components/__snapshots__/InputTime-vue.spec.ts.snap
@@ -1,450 +1,450 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`InputTime > renders with ariaLabel correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" aria-label="Aria label" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" aria-label="Aria label" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with as correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with class correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary max-w-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary max-w-sm" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with default slot correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>Default slot
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>Default slot
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with default value correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with disabled correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" aria-disabled="true" data-disabled="" dir="ltr">
-  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" aria-disabled="true" data-disabled="" dir="ltr">
+  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" disabled="" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with granularity correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with hide time zone correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with hour cycle 12 correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with hour cycle 24 correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with icon correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with leadingIcon correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with max value correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with min value correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with modelValue correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with neutral variant ghost correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with neutral variant none correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with neutral variant outline correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with neutral variant soft correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with neutral variant subtle correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with placeholder correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with primary variant ghost correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with primary variant none correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with primary variant outline correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with primary variant soft correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with primary variant subtle correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with readonly correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" data-readonly="" dir="ltr">
-  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" data-readonly="" dir="ltr">
+  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" aria-readonly="true" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" aria-readonly="true" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" aria-readonly="true" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with required correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" required="" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with size lg correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-sm gap-0.75 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-sm gap-0.75 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with size md correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with size sm correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-xs gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-xs gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with size xl correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-base gap-0.75 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-base gap-0.75 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with size xs correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2 py-1 text-xs gap-0.25 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2 py-1 text-xs gap-0.25 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with trailingIcon correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with ui correctly 1`] = `
-"<div class="group relative inline-flex items-center select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
diff --git a/test/components/__snapshots__/InputTime.spec.ts.snap b/test/components/__snapshots__/InputTime.spec.ts.snap
index 657f953fb8..5fa1e45dca 100644
--- a/test/components/__snapshots__/InputTime.spec.ts.snap
+++ b/test/components/__snapshots__/InputTime.spec.ts.snap
@@ -1,450 +1,450 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`InputTime > renders with ariaLabel correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" aria-label="Aria label" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" aria-label="Aria label" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with as correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with class correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary max-w-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary max-w-sm" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with default slot correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>Default slot
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>Default slot
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with default value correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with disabled correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" aria-disabled="true" data-disabled="" dir="ltr">
-  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" aria-disabled="true" data-disabled="" dir="ltr">
+  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" disabled="" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with granularity correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with hide time zone correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with hour cycle 12 correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with hour cycle 24 correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with icon correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:clock shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:clock shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with leadingIcon correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with max value correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with min value correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with modelValue correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with neutral variant ghost correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with neutral variant none correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with neutral variant outline correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with neutral variant soft correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with neutral variant subtle correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with placeholder correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with primary variant ghost correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with primary variant none correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with primary variant outline correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with primary variant soft correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with primary variant subtle correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with readonly correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" data-readonly="" dir="ltr">
-  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" data-readonly="" dir="ltr">
+  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" aria-readonly="true" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" aria-readonly="true" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" aria-readonly="true" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with required correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" required="" value="12:30:00">
 </div>"
 `;
 
 exports[`InputTime > renders with size lg correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-sm gap-0.75 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-sm gap-0.75 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with size md correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with size sm correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-xs gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-xs gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with size xl correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-base gap-0.75 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-base gap-0.75 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with size xs correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2 py-1 text-xs gap-0.25 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2 py-1 text-xs gap-0.25 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with trailingIcon correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+"<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
 `;
 
 exports[`InputTime > renders with ui correctly 1`] = `
-"<div class="group relative inline-flex items-center select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+"<div data-slot="base" class="group relative inline-flex items-center select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full" role="group" dir="ltr">
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if-->
   <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
 </div>"
diff --git a/test/components/__snapshots__/Marquee-vue.spec.ts.snap b/test/components/__snapshots__/Marquee-vue.spec.ts.snap
index 5ddffdbe98..e95b8ccb46 100644
--- a/test/components/__snapshots__/Marquee-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Marquee-vue.spec.ts.snap
@@ -1,84 +1,84 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Marquee > renders with as correctly 1`] = `
-"<section data-orientation="horizontal" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+"<section data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
 </section>"
 `;
 
 exports[`Marquee > renders with class correctly 1`] = `
-"<div data-orientation="horizontal" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden text-xl">
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden text-xl">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
 </div>"
 `;
 
 exports[`Marquee > renders with default slot correctly 1`] = `
-"<div data-orientation="horizontal" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
 </div>"
 `;
 
 exports[`Marquee > renders with orientation correctly 1`] = `
-"<div data-orientation="vertical" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-col before:inset-x-0 before:top-0 before:w-full before:h-1/3 before:bg-gradient-to-b after:inset-x-0 after:bottom-0 after:w-full after:h-1/3 after:bg-gradient-to-t backface-hidden">
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
+"<div data-orientation="vertical" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-col before:inset-x-0 before:top-0 before:w-full before:h-1/3 before:bg-gradient-to-b after:inset-x-0 after:bottom-0 after:w-full after:h-1/3 after:bg-gradient-to-t backface-hidden">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
 </div>"
 `;
 
 exports[`Marquee > renders with overlay off correctly 1`] = `
-"<div data-orientation="horizontal" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] flex-row">
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] flex-row">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
 </div>"
 `;
 
 exports[`Marquee > renders with pauseOnHover correctly 1`] = `
-"<div data-orientation="horizontal" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
 </div>"
 `;
 
 exports[`Marquee > renders with repeat correctly 1`] = `
-"<div data-orientation="horizontal" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
 </div>"
 `;
 
 exports[`Marquee > renders with reverse correctly 1`] = `
-"<div data-orientation="horizontal" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
 </div>"
 `;
 
 exports[`Marquee > renders with ui correctly 1`] = `
-"<div data-orientation="horizontal" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
-  <div class="flex items-center shrink-0 justify-around min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
-  <div class="flex items-center shrink-0 justify-around min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
-  <div class="flex items-center shrink-0 justify-around min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
-  <div class="flex items-center shrink-0 justify-around min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
 </div>"
 `;
diff --git a/test/components/__snapshots__/Marquee.spec.ts.snap b/test/components/__snapshots__/Marquee.spec.ts.snap
index 5ddffdbe98..e95b8ccb46 100644
--- a/test/components/__snapshots__/Marquee.spec.ts.snap
+++ b/test/components/__snapshots__/Marquee.spec.ts.snap
@@ -1,84 +1,84 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Marquee > renders with as correctly 1`] = `
-"<section data-orientation="horizontal" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+"<section data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
 </section>"
 `;
 
 exports[`Marquee > renders with class correctly 1`] = `
-"<div data-orientation="horizontal" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden text-xl">
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden text-xl">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
 </div>"
 `;
 
 exports[`Marquee > renders with default slot correctly 1`] = `
-"<div data-orientation="horizontal" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
 </div>"
 `;
 
 exports[`Marquee > renders with orientation correctly 1`] = `
-"<div data-orientation="vertical" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-col before:inset-x-0 before:top-0 before:w-full before:h-1/3 before:bg-gradient-to-b after:inset-x-0 after:bottom-0 after:w-full after:h-1/3 after:bg-gradient-to-t backface-hidden">
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
+"<div data-orientation="vertical" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-col before:inset-x-0 before:top-0 before:w-full before:h-1/3 before:bg-gradient-to-b after:inset-x-0 after:bottom-0 after:w-full after:h-1/3 after:bg-gradient-to-t backface-hidden">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
 </div>"
 `;
 
 exports[`Marquee > renders with overlay off correctly 1`] = `
-"<div data-orientation="horizontal" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] flex-row">
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] flex-row">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
 </div>"
 `;
 
 exports[`Marquee > renders with pauseOnHover correctly 1`] = `
-"<div data-orientation="horizontal" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
 </div>"
 `;
 
 exports[`Marquee > renders with repeat correctly 1`] = `
-"<div data-orientation="horizontal" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
 </div>"
 `;
 
 exports[`Marquee > renders with reverse correctly 1`] = `
-"<div data-orientation="horizontal" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
 </div>"
 `;
 
 exports[`Marquee > renders with ui correctly 1`] = `
-"<div data-orientation="horizontal" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
-  <div class="flex items-center shrink-0 justify-around min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
-  <div class="flex items-center shrink-0 justify-around min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
-  <div class="flex items-center shrink-0 justify-around min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
-  <div class="flex items-center shrink-0 justify-around min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
+  <div data-slot="content" class="flex items-center shrink-0 justify-around min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
 </div>"
 `;
diff --git a/test/components/__snapshots__/Modal-vue.spec.ts.snap b/test/components/__snapshots__/Modal-vue.spec.ts.snap
index 9f614c0ea8..50a3f99f6c 100644
--- a/test/components/__snapshots__/Modal-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Modal-vue.spec.ts.snap
@@ -6,14 +6,14 @@ exports[`Modal > renders with actions slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div>Actions slot<button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </div>Actions slot<button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -33,19 +33,19 @@ exports[`Modal > renders with body slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 p-4 sm:p-6 overflow-y-auto">Body slot</div>
+  <div data-slot="body" class="flex-1 p-4 sm:p-6 overflow-y-auto">Body slot</div>
   <!--v-if-->
 </div>
 
@@ -60,14 +60,14 @@ exports[`Modal > renders with class correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden bg-elevated" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden bg-elevated" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -87,11 +87,11 @@ exports[`Modal > renders with close slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>Close slot
@@ -111,14 +111,14 @@ exports[`Modal > renders with closeIcon correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -138,8 +138,8 @@ exports[`Modal > renders with content slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->Content slot
 </div>
 
@@ -154,14 +154,14 @@ exports[`Modal > renders with default slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="reka-dialog-content-v-0" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="reka-dialog-content-v-0" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -181,14 +181,14 @@ exports[`Modal > renders with description correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -208,14 +208,14 @@ exports[`Modal > renders with description slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
-      <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description slot</p>
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description slot</p>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -235,20 +235,20 @@ exports[`Modal > renders with footer slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6">Footer slot</div>
+  <div data-slot="footer" class="flex items-center gap-1.5 p-4 sm:px-6">Footer slot</div>
 </div>
 
 
@@ -262,14 +262,14 @@ exports[`Modal > renders with fullscreen correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 fixed" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 fixed" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -289,10 +289,10 @@ exports[`Modal > renders with header slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">Header slot</div>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">Header slot</div>
   <!--v-if-->
   <!--v-if-->
 </div>
@@ -308,14 +308,14 @@ exports[`Modal > renders with open correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -334,14 +334,14 @@ exports[`Modal > renders with scrollable and fullscreen correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75 overflow-y-auto">
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75 overflow-y-auto">
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
     <!--v-if-->
-    <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-      <div class="">
-        <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
-      </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+      <div data-slot="wrapper" class="">
+        <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+      </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button>
@@ -360,14 +360,14 @@ exports[`Modal > renders with scrollable and without overlay correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] overflow-y-auto grid place-items-center p-4 sm:py-8">
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] overflow-y-auto grid place-items-center p-4 sm:py-8">
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
     <!--v-if-->
-    <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-      <div class="">
-        <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
-      </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+      <div data-slot="wrapper" class="">
+        <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+      </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button>
@@ -386,14 +386,14 @@ exports[`Modal > renders with scrollable correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75 overflow-y-auto grid place-items-center p-4 sm:py-8">
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75 overflow-y-auto grid place-items-center p-4 sm:py-8">
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
     <!--v-if-->
-    <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-      <div class="">
-        <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
-      </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+      <div data-slot="wrapper" class="">
+        <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+      </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
         <!--v-if-->
       </button>
@@ -413,14 +413,14 @@ exports[`Modal > renders with title correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -440,14 +440,14 @@ exports[`Modal > renders with title slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title slot</h2>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title slot</h2>
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -467,14 +467,14 @@ exports[`Modal > renders with ui correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -494,13 +494,13 @@ exports[`Modal > renders without close correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
     </div>
     <!--v-if-->
   </div>
@@ -520,13 +520,13 @@ exports[`Modal > renders without overlay correctly 1`] = `
 
 
 <!--v-if-->
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -546,14 +546,14 @@ exports[`Modal > renders without transition correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
diff --git a/test/components/__snapshots__/Modal.spec.ts.snap b/test/components/__snapshots__/Modal.spec.ts.snap
index 389ba7286c..4704624553 100644
--- a/test/components/__snapshots__/Modal.spec.ts.snap
+++ b/test/components/__snapshots__/Modal.spec.ts.snap
@@ -6,14 +6,14 @@ exports[`Modal > renders with actions slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div>Actions slot<button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    </div>Actions slot<button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -33,19 +33,19 @@ exports[`Modal > renders with body slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 p-4 sm:p-6 overflow-y-auto">Body slot</div>
+  <div data-slot="body" class="flex-1 p-4 sm:p-6 overflow-y-auto">Body slot</div>
   <!--v-if-->
 </div>
 
@@ -60,14 +60,14 @@ exports[`Modal > renders with class correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden bg-elevated" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden bg-elevated" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -87,11 +87,11 @@ exports[`Modal > renders with close slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>Close slot
@@ -111,14 +111,14 @@ exports[`Modal > renders with closeIcon correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true"></span>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -138,8 +138,8 @@ exports[`Modal > renders with content slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->Content slot
 </div>
 
@@ -154,14 +154,14 @@ exports[`Modal > renders with default slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="reka-dialog-content-v-0-0-0" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="reka-dialog-content-v-0-0-0" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -181,14 +181,14 @@ exports[`Modal > renders with description correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -208,14 +208,14 @@ exports[`Modal > renders with description slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
-      <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description slot</p>
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+      <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description slot</p>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -235,20 +235,20 @@ exports[`Modal > renders with footer slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6">Footer slot</div>
+  <div data-slot="footer" class="flex items-center gap-1.5 p-4 sm:px-6">Footer slot</div>
 </div>
 
 
@@ -262,14 +262,14 @@ exports[`Modal > renders with fullscreen correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 fixed" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 fixed" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -289,10 +289,10 @@ exports[`Modal > renders with header slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">Header slot</div>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">Header slot</div>
   <!--v-if-->
   <!--v-if-->
 </div>
@@ -308,14 +308,14 @@ exports[`Modal > renders with open correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -334,14 +334,14 @@ exports[`Modal > renders with scrollable and fullscreen correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75 overflow-y-auto">
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75 overflow-y-auto">
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
     <!--v-if-->
-    <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-      <div class="">
-        <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
-      </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+      <div data-slot="wrapper" class="">
+        <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+      </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button>
@@ -360,14 +360,14 @@ exports[`Modal > renders with scrollable and without overlay correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] overflow-y-auto grid place-items-center p-4 sm:py-8">
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] overflow-y-auto grid place-items-center p-4 sm:py-8">
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
     <!--v-if-->
-    <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-      <div class="">
-        <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
-      </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+      <div data-slot="wrapper" class="">
+        <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+      </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button>
@@ -386,14 +386,14 @@ exports[`Modal > renders with scrollable correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75 overflow-y-auto grid place-items-center p-4 sm:py-8">
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75 overflow-y-auto grid place-items-center p-4 sm:py-8">
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
     <!--v-if-->
-    <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-      <div class="">
-        <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
-      </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+      <div data-slot="wrapper" class="">
+        <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+      </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
         <!--v-if-->
       </button>
@@ -413,14 +413,14 @@ exports[`Modal > renders with title correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -440,14 +440,14 @@ exports[`Modal > renders with title slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title slot</h2>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title slot</h2>
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -467,14 +467,14 @@ exports[`Modal > renders with ui correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-2"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-2"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -494,13 +494,13 @@ exports[`Modal > renders without close correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
     </div>
     <!--v-if-->
   </div>
@@ -520,13 +520,13 @@ exports[`Modal > renders without overlay correctly 1`] = `
 
 
 <!--v-if-->
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -546,14 +546,14 @@ exports[`Modal > renders without transition correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
diff --git a/test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap b/test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap
index 0d4190e6f8..bfb41d75a5 100644
--- a/test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap
+++ b/test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap
@@ -1,19 +1,19 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`NavigationMenu > renders with arrow correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!--teleport end-->
@@ -23,29 +23,29 @@ exports[`NavigationMenu > renders with arrow correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
         <!--v-if-->
       </li>
     </ul>
-    <div aria-hidden="true" data-state="visible" data-orientation="horizontal" class="absolute data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] data-[state=hidden]:opacity-0 bottom-0 z-[2] w-(--reka-navigation-menu-indicator-size) translate-x-(--reka-navigation-menu-indicator-position) flex h-2.5 items-end justify-center overflow-hidden transition-[translate,width] duration-200">
-      <div class="relative top-[50%] size-2.5 rotate-45 border border-default bg-default z-[1] rounded-xs"></div>
+    <div aria-hidden="true" data-state="visible" data-orientation="horizontal" data-slot="indicator" class="absolute data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] data-[state=hidden]:opacity-0 bottom-0 z-[2] w-(--reka-navigation-menu-indicator-size) translate-x-(--reka-navigation-menu-indicator-position) flex h-2.5 items-end justify-center overflow-hidden transition-[translate,width] duration-200">
+      <div data-slot="arrow" class="relative top-[50%] size-2.5 rotate-45 border border-default bg-default z-[1] rounded-xs"></div>
     </div>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--teleport start-->
     <!--teleport end-->
-    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="open" data-orientation="horizontal">
+    <div data-slot="viewport" class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="open" data-orientation="horizontal">
       <!---->
       <!---->
     </div>
@@ -54,12 +54,12 @@ exports[`NavigationMenu > renders with arrow correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with as correctly 1`] = `
-"<section data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<section data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -67,7 +67,7 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -78,14 +78,14 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -94,7 +94,7 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -102,12 +102,12 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with class correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between w-48" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between w-48" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -115,7 +115,7 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -126,14 +126,14 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -142,7 +142,7 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -150,19 +150,19 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with content orientation vertical correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!--teleport end-->
@@ -172,14 +172,14 @@ exports[`NavigationMenu > renders with content orientation vertical correctly 1`
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -188,9 +188,9 @@ exports[`NavigationMenu > renders with content orientation vertical correctly 1`
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full">
     <!--v-if-->
-    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1] sm:w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left)" data-state="open" data-orientation="horizontal">
+    <div data-slot="viewport" class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1] sm:w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left)" data-state="open" data-orientation="horizontal">
       <!---->
       <!---->
     </div>
@@ -199,12 +199,12 @@ exports[`NavigationMenu > renders with content orientation vertical correctly 1`
 `;
 
 exports[`NavigationMenu > renders with custom slot correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -212,7 +212,7 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -223,14 +223,14 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -239,7 +239,7 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -247,12 +247,12 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with externalIcon correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -260,7 +260,7 @@ exports[`NavigationMenu > renders with externalIcon correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -271,14 +271,14 @@ exports[`NavigationMenu > renders with externalIcon correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -287,7 +287,7 @@ exports[`NavigationMenu > renders with externalIcon correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -295,18 +295,18 @@ exports[`NavigationMenu > renders with externalIcon correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with item slot correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50">Item slot</button>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50">Item slot</button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated">Item slot</button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated">Item slot</button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -317,19 +317,19 @@ exports[`NavigationMenu > renders with item slot correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50">Item slot</a>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50">Item slot</a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75">Item slot</button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75">Item slot</button>
         <!--v-if-->
         <!--v-if-->
       </li>
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -337,12 +337,12 @@ exports[`NavigationMenu > renders with item slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Item label slot<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">Item label slot<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -350,7 +350,7 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Item label slot<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span data-slot="linkLabel" class="truncate">Item label slot<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -361,14 +361,14 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Item label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">Item label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">Item label slot<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg><span data-slot="linkLabel" class="truncate">Item label slot<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -377,7 +377,7 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -385,12 +385,12 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50">Item leading slot<span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50">Item leading slot<span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -398,7 +398,7 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated">Item leading slot<span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated">Item leading slot<span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -409,14 +409,14 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50">Item leading slot<span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50">Item leading slot<span data-slot="linkLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75">Item leading slot<span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75">Item leading slot<span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -425,7 +425,7 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -433,18 +433,18 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -455,19 +455,19 @@ exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></a>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">Help<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
         <!--v-if-->
         <!--v-if-->
       </li>
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -475,12 +475,12 @@ exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with items correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -488,7 +488,7 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -499,14 +499,14 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -515,7 +515,7 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -523,12 +523,12 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with labelKey correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">i-lucide-book-open<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">i-lucide-book-open<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -536,7 +536,7 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">i-lucide-box<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span data-slot="linkLabel" class="truncate">i-lucide-box<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -547,14 +547,14 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">i-simple-icons-github<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">i-simple-icons-github<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">i-lucide-circle-help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg><span data-slot="linkLabel" class="truncate">i-lucide-circle-help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -563,7 +563,7 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -571,19 +571,19 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with modelValue correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!--teleport end-->
@@ -593,14 +593,14 @@ exports[`NavigationMenu > renders with modelValue correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -609,9 +609,9 @@ exports[`NavigationMenu > renders with modelValue correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="open" data-orientation="horizontal">
+    <div data-slot="viewport" class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="open" data-orientation="horizontal">
       <!---->
       <!---->
     </div>
@@ -620,12 +620,12 @@ exports[`NavigationMenu > renders with modelValue correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -633,7 +633,7 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-highlighted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-highlighted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted"></svg><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -644,14 +644,14 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -660,7 +660,7 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -668,12 +668,12 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with neutral variant link highlight correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -681,7 +681,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-highlighted after:bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-highlighted after:bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted"></svg><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -692,14 +692,14 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -708,7 +708,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -716,12 +716,12 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
 `;
 
 exports[`NavigationMenu > renders with neutral variant link highlight neutral correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -729,7 +729,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-highlighted after:bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-highlighted after:bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted"></svg><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -740,14 +740,14 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -756,7 +756,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -764,12 +764,12 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
 `;
 
 exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -777,7 +777,7 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted"></svg><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -788,14 +788,14 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -804,7 +804,7 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -812,12 +812,12 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with neutral variant pill highlight correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -825,7 +825,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-elevated/50 text-highlighted hover:before:bg-elevated/50 before:transition-colors after:bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-elevated/50 text-highlighted hover:before:bg-elevated/50 before:transition-colors after:bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted"></svg><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -836,14 +836,14 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -852,7 +852,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -860,12 +860,12 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
 `;
 
 exports[`NavigationMenu > renders with neutral variant pill highlight neutral correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -873,7 +873,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-elevated/50 text-highlighted hover:before:bg-elevated/50 before:transition-colors after:bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-elevated/50 text-highlighted hover:before:bg-elevated/50 before:transition-colors after:bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted"></svg><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -884,14 +884,14 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -900,7 +900,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -908,18 +908,18 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
 `;
 
 exports[`NavigationMenu > renders with orientation vertical and collapsed correctly 1`] = `
-"<nav data-collapsed="true" class="relative flex gap-1.5 [&amp;>div]:min-w-0 flex-col" aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="true" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 flex-col" aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0" data-orientation="vertical">
-      <li data-menu-item="" class="min-w-0"></li>
-      <li data-menu-item="" class="min-w-0"><button type="button" data-reka-collection-item="" 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 px-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors"></svg>
+    <ul data-slot="list" class="isolate min-w-0" data-orientation="vertical">
+      <li data-menu-item="" data-slot="item" class="min-w-0"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0"><button type="button" data-reka-collection-item="" data-slot="link" 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 px-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors"></svg>
           <!--v-if-->
           <!--v-if-->
         </button>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0"><button type="button" data-reka-collection-item="" data-active="" aria-current="page" 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 px-1.5 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg>
+      <li data-menu-item="" data-slot="item" class="min-w-0"><button type="button" data-reka-collection-item="" data-active="" aria-current="page" data-slot="link" 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 px-1.5 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg>
           <!--v-if-->
           <!--v-if-->
         </button>
@@ -928,17 +928,17 @@ exports[`NavigationMenu > renders with orientation vertical and collapsed correc
       </li>
     </ul>
   </div>
-  <div class="px-2 h-px bg-border"></div>
+  <div data-slot="separator" class="px-2 h-px bg-border"></div>
   <div style="position: relative;">
-    <ul class="isolate min-w-0" data-orientation="vertical">
-      <li data-menu-item="" class="min-w-0"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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 px-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors"></svg>
+    <ul data-slot="list" class="isolate min-w-0" data-orientation="vertical">
+      <li data-menu-item="" data-slot="item" class="min-w-0"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors"></svg>
           <!--v-if-->
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0"><button type="button" disabled="" data-reka-collection-item="" 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 cursor-not-allowed opacity-75 px-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg>
+      <li data-menu-item="" data-slot="item" class="min-w-0"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 cursor-not-allowed opacity-75 px-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg>
           <!--v-if-->
           <!--v-if-->
         </button>
@@ -953,39 +953,39 @@ exports[`NavigationMenu > renders with orientation vertical and collapsed correc
 `;
 
 exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 flex-col" aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="">
-  <ul class="isolate min-w-0">
-    <li data-state="closed" data-orientation="vertical" class="min-w-0">
-      <div class="w-full flex items-center gap-1.5 font-semibold text-xs/5 text-highlighted px-2.5 py-1.5">
-        <!--v-if--><span class="truncate">Links<!--v-if--></span>
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 flex-col" aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="">
+  <ul data-slot="list" class="isolate min-w-0">
+    <li data-state="closed" data-orientation="vertical" data-slot="item" class="min-w-0">
+      <div data-slot="label" class="w-full flex items-center gap-1.5 font-semibold text-xs/5 text-highlighted px-2.5 py-1.5">
+        <!--v-if--><span data-slot="linkLabel" class="truncate">Links<!--v-if--></span>
         <!--v-if-->
       </div>
       <!--v-if-->
     </li>
-    <li data-state="closed" data-orientation="vertical" class="min-w-0"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-1" data-reka-collection-item="" data-orientation="vertical" 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 px-2.5 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors"></svg><span class="truncate">Documentation<!--v-if--></span><span aria-controls="" aria-expanded="false" data-state="closed" disabled="false" id="reka-accordion-trigger-v-1" data-reka-collection-item="" data-orientation="vertical" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-        <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+    <li data-state="closed" data-orientation="vertical" data-slot="item" class="min-w-0"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-1" data-reka-collection-item="" data-orientation="vertical" data-slot="link" 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 px-2.5 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span aria-controls="" aria-expanded="false" data-state="closed" disabled="false" id="reka-accordion-trigger-v-1" data-reka-collection-item="" data-orientation="vertical" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+        <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
       </button>
       <!--v-if-->
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-1" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" 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="">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-1" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" 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="">
         <!--v-if-->
       </div>
     </li>
-    <li data-state="closed" data-orientation="vertical" class="min-w-0"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-3" data-reka-collection-item="" data-orientation="vertical" 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 px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span aria-controls="" aria-expanded="false" data-state="closed" disabled="false" id="reka-accordion-trigger-v-3" data-reka-collection-item="" data-orientation="vertical" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+    <li data-state="closed" data-orientation="vertical" data-slot="item" class="min-w-0"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-3" data-reka-collection-item="" data-orientation="vertical" data-slot="link" 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 px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span aria-controls="" aria-expanded="false" data-state="closed" disabled="false" id="reka-accordion-trigger-v-3" data-reka-collection-item="" data-orientation="vertical" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
       <!--v-if-->
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-3" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" 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-4" hidden="">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-3" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" 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-4" hidden="">
         <!--v-if-->
       </div>
     </li>
   </ul>
-  <div class="px-2 h-px bg-border"></div>
-  <ul class="isolate min-w-0">
-    <li data-state="closed" data-orientation="vertical" class="min-w-0"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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 px-2.5 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
+  <div data-slot="separator" class="px-2 h-px bg-border"></div>
+  <ul data-slot="list" class="isolate min-w-0">
+    <li data-state="closed" data-orientation="vertical" data-slot="item" class="min-w-0"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors"></svg><span data-slot="linkLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
         <!--v-if-->
       </a>
       <!--v-if-->
       <!--v-if-->
     </li>
-    <li data-state="closed" data-orientation="vertical" class="min-w-0"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">Help<!--v-if--></span>
+    <li data-state="closed" data-orientation="vertical" data-slot="item" class="min-w-0"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
         <!--v-if-->
       </button>
       <!--v-if-->
@@ -998,12 +998,12 @@ exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -1011,7 +1011,7 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -1022,14 +1022,14 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1038,7 +1038,7 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -1046,12 +1046,12 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with primary variant link highlight correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -1059,7 +1059,7 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-primary after:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-primary after:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -1070,14 +1070,14 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1086,7 +1086,7 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -1094,12 +1094,12 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
 `;
 
 exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -1107,7 +1107,7 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -1118,14 +1118,14 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1134,7 +1134,7 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -1142,12 +1142,12 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with primary variant pill highlight correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -1155,7 +1155,7 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-elevated/50 text-primary hover:before:bg-elevated/50 before:transition-colors after:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-elevated/50 text-primary hover:before:bg-elevated/50 before:transition-colors after:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -1166,14 +1166,14 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1182,7 +1182,7 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -1190,12 +1190,12 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
 `;
 
 exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -1203,7 +1203,7 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -1214,14 +1214,14 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1230,7 +1230,7 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -1238,12 +1238,12 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with ui correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -1251,7 +1251,7 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -1262,14 +1262,14 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1278,7 +1278,7 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -1286,19 +1286,19 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!--teleport end-->
@@ -1308,14 +1308,14 @@ exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1324,93 +1324,93 @@ exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
-      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden="">
-        <ul class="isolate grid p-2 grid-cols-2 gap-2">
-          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
-              <div class="min-w-0">
-                <p class="truncate font-medium">Introduction
+    <div data-slot="viewport" class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" data-slot="content" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden="">
+        <ul data-slot="childList" class="isolate grid p-2 grid-cols-2 gap-2">
+          <li data-slot="childItem" class=""><button type="button" data-reka-collection-item="" data-slot="childLink" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="childLinkIcon" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div data-slot="childLinkWrapper" class="min-w-0">
+                <p data-slot="childLinkLabel" class="truncate font-medium">Introduction
                   <!--v-if-->
                 </p>
-                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+                <p data-slot="childLinkDescription" class="text-muted">Fully styled and customizable components for Nuxt.</p>
               </div>
             </button></li>
-          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
-              <div class="min-w-0">
-                <p class="truncate font-medium">Installation
+          <li data-slot="childItem" class=""><button type="button" data-reka-collection-item="" data-slot="childLink" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="childLinkIcon" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div data-slot="childLinkWrapper" class="min-w-0">
+                <p data-slot="childLinkLabel" class="truncate font-medium">Installation
                   <!--v-if-->
                 </p>
-                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+                <p data-slot="childLinkDescription" class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
               </div>
             </button></li>
-          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
-              <div class="min-w-0">
-                <p class="truncate font-medium">Theming
+          <li data-slot="childItem" class=""><button type="button" data-reka-collection-item="" data-slot="childLink" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="childLinkIcon" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div data-slot="childLinkWrapper" class="min-w-0">
+                <p data-slot="childLinkLabel" class="truncate font-medium">Theming
                   <!--v-if-->
                 </p>
-                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+                <p data-slot="childLinkDescription" class="text-muted">Learn how to customize the look and feel of the components.</p>
               </div>
             </button></li>
-          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
-              <div class="min-w-0">
-                <p class="truncate font-medium">Shortcuts
+          <li data-slot="childItem" class=""><button type="button" data-reka-collection-item="" data-slot="childLink" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="childLinkIcon" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div data-slot="childLinkWrapper" class="min-w-0">
+                <p data-slot="childLinkLabel" class="truncate font-medium">Shortcuts
                   <!--v-if-->
                 </p>
-                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+                <p data-slot="childLinkDescription" class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
               </div>
             </button></li>
         </ul>
       </div>
-      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden="">
-        <ul class="isolate grid p-2 grid-cols-2 gap-2">
-          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
-              <div class="min-w-0">
-                <p class="truncate font-medium">Link
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" data-slot="content" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden="">
+        <ul data-slot="childList" class="isolate grid p-2 grid-cols-2 gap-2">
+          <li data-slot="childItem" class=""><a href="/components/link" data-reka-collection-item="" data-slot="childLink" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="childLinkIcon" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div data-slot="childLinkWrapper" class="min-w-0">
+                <p data-slot="childLinkLabel" class="truncate font-medium">Link
                   <!--v-if-->
                 </p>
-                <p class="text-muted">Use NuxtLink with superpowers.</p>
+                <p data-slot="childLinkDescription" class="text-muted">Use NuxtLink with superpowers.</p>
               </div>
             </a></li>
-          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
-              <div class="min-w-0">
-                <p class="truncate font-medium">Modal
+          <li data-slot="childItem" class=""><a href="/components/modal" data-reka-collection-item="" data-slot="childLink" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="childLinkIcon" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div data-slot="childLinkWrapper" class="min-w-0">
+                <p data-slot="childLinkLabel" class="truncate font-medium">Modal
                   <!--v-if-->
                 </p>
-                <p class="text-muted">Display a modal within your application.</p>
+                <p data-slot="childLinkDescription" class="text-muted">Display a modal within your application.</p>
               </div>
             </a></li>
-          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
-              <div class="min-w-0">
-                <p class="truncate font-medium">NavigationMenu
+          <li data-slot="childItem" class=""><a href="/components/navigation-menu" data-reka-collection-item="" data-slot="childLink" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="childLinkIcon" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div data-slot="childLinkWrapper" class="min-w-0">
+                <p data-slot="childLinkLabel" class="truncate font-medium">NavigationMenu
                   <!--v-if-->
                 </p>
-                <p class="text-muted">Display a list of links.</p>
+                <p data-slot="childLinkDescription" class="text-muted">Display a list of links.</p>
               </div>
             </a></li>
-          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
-              <div class="min-w-0">
-                <p class="truncate font-medium">Pagination
+          <li data-slot="childItem" class=""><a href="/components/pagination" data-reka-collection-item="" data-slot="childLink" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="childLinkIcon" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div data-slot="childLinkWrapper" class="min-w-0">
+                <p data-slot="childLinkLabel" class="truncate font-medium">Pagination
                   <!--v-if-->
                 </p>
-                <p class="text-muted">Display a list of pages.</p>
+                <p data-slot="childLinkDescription" class="text-muted">Display a list of pages.</p>
               </div>
             </a></li>
-          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
-              <div class="min-w-0">
-                <p class="truncate font-medium">Popover
+          <li data-slot="childItem" class=""><a href="/components/popover" data-reka-collection-item="" data-slot="childLink" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="childLinkIcon" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div data-slot="childLinkWrapper" class="min-w-0">
+                <p data-slot="childLinkLabel" class="truncate font-medium">Popover
                   <!--v-if-->
                 </p>
-                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+                <p data-slot="childLinkDescription" class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
               </div>
             </a></li>
-          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
-              <div class="min-w-0">
-                <p class="truncate font-medium">Progress
+          <li data-slot="childItem" class=""><a href="/components/progress" data-reka-collection-item="" data-slot="childLink" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="childLinkIcon" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div data-slot="childLinkWrapper" class="min-w-0">
+                <p data-slot="childLinkLabel" class="truncate font-medium">Progress
                   <!--v-if-->
                 </p>
-                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+                <p data-slot="childLinkDescription" class="text-muted">Show a horizontal bar to indicate task progression.</p>
               </div>
             </a></li>
         </ul>
@@ -1421,12 +1421,12 @@ exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders without externalIcon correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -1434,7 +1434,7 @@ exports[`NavigationMenu > renders without externalIcon correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -1445,14 +1445,14 @@ exports[`NavigationMenu > renders without externalIcon correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">GitHub<!--v-if--></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span data-slot="linkLabel" class="truncate">GitHub<!--v-if--></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1461,7 +1461,7 @@ exports[`NavigationMenu > renders without externalIcon correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
diff --git a/test/components/__snapshots__/NavigationMenu.spec.ts.snap b/test/components/__snapshots__/NavigationMenu.spec.ts.snap
index 1208e78bcc..262cb5ebfd 100644
--- a/test/components/__snapshots__/NavigationMenu.spec.ts.snap
+++ b/test/components/__snapshots__/NavigationMenu.spec.ts.snap
@@ -1,19 +1,19 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`NavigationMenu > renders with arrow correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!--teleport end-->
@@ -23,29 +23,29 @@ exports[`NavigationMenu > renders with arrow correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
         <!--v-if-->
       </li>
     </ul>
-    <div aria-hidden="true" data-state="visible" data-orientation="horizontal" class="absolute data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] data-[state=hidden]:opacity-0 bottom-0 z-[2] w-(--reka-navigation-menu-indicator-size) translate-x-(--reka-navigation-menu-indicator-position) flex h-2.5 items-end justify-center overflow-hidden transition-[translate,width] duration-200">
-      <div class="relative top-[50%] size-2.5 rotate-45 border border-default bg-default z-[1] rounded-xs"></div>
+    <div aria-hidden="true" data-state="visible" data-orientation="horizontal" data-slot="indicator" class="absolute data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] data-[state=hidden]:opacity-0 bottom-0 z-[2] w-(--reka-navigation-menu-indicator-size) translate-x-(--reka-navigation-menu-indicator-position) flex h-2.5 items-end justify-center overflow-hidden transition-[translate,width] duration-200">
+      <div data-slot="arrow" class="relative top-[50%] size-2.5 rotate-45 border border-default bg-default z-[1] rounded-xs"></div>
     </div>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--teleport start-->
     <!--teleport end-->
-    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="open" data-orientation="horizontal">
+    <div data-slot="viewport" class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="open" data-orientation="horizontal">
       <!---->
       <!---->
     </div>
@@ -54,12 +54,12 @@ exports[`NavigationMenu > renders with arrow correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with as correctly 1`] = `
-"<section data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<section data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -67,7 +67,7 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -78,14 +78,14 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -94,7 +94,7 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -102,12 +102,12 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with class correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between w-48" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between w-48" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -115,7 +115,7 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -126,14 +126,14 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -142,7 +142,7 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -150,19 +150,19 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with content orientation vertical correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!--teleport end-->
@@ -172,14 +172,14 @@ exports[`NavigationMenu > renders with content orientation vertical correctly 1`
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -188,9 +188,9 @@ exports[`NavigationMenu > renders with content orientation vertical correctly 1`
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full">
     <!--v-if-->
-    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1] sm:w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left)" data-state="open" data-orientation="horizontal">
+    <div data-slot="viewport" class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1] sm:w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left)" data-state="open" data-orientation="horizontal">
       <!---->
       <!---->
     </div>
@@ -199,12 +199,12 @@ exports[`NavigationMenu > renders with content orientation vertical correctly 1`
 `;
 
 exports[`NavigationMenu > renders with custom slot correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -212,7 +212,7 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -223,14 +223,14 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -239,7 +239,7 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -247,12 +247,12 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with externalIcon correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -260,7 +260,7 @@ exports[`NavigationMenu > renders with externalIcon correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -271,14 +271,14 @@ exports[`NavigationMenu > renders with externalIcon correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:external-link inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">GitHub<span class="iconify i-lucide:external-link inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -287,7 +287,7 @@ exports[`NavigationMenu > renders with externalIcon correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -295,18 +295,18 @@ exports[`NavigationMenu > renders with externalIcon correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with item slot correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50">Item slot</button>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50">Item slot</button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated">Item slot</button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated">Item slot</button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -317,19 +317,19 @@ exports[`NavigationMenu > renders with item slot correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50">Item slot</a>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50">Item slot</a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75">Item slot</button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75">Item slot</button>
         <!--v-if-->
         <!--v-if-->
       </li>
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -337,12 +337,12 @@ exports[`NavigationMenu > renders with item slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Item label slot<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -350,7 +350,7 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Item label slot<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -361,14 +361,14 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Item label slot<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Item label slot<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Item label slot<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -377,7 +377,7 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -385,12 +385,12 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50">Item leading slot<span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50">Item leading slot<span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -398,7 +398,7 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated">Item leading slot<span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated">Item leading slot<span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -409,14 +409,14 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50">Item leading slot<span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50">Item leading slot<span data-slot="linkLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75">Item leading slot<span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75">Item leading slot<span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -425,7 +425,7 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -433,18 +433,18 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -455,19 +455,19 @@ exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></a>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
         <!--v-if-->
         <!--v-if-->
       </li>
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -475,12 +475,12 @@ exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with items correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -488,7 +488,7 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -499,14 +499,14 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -515,7 +515,7 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -523,12 +523,12 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with labelKey correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">i-lucide-book-open<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">i-lucide-book-open<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -536,7 +536,7 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">i-lucide-box<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">i-lucide-box<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -547,14 +547,14 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">i-simple-icons-github<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">i-simple-icons-github<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">i-lucide-circle-help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">i-lucide-circle-help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -563,7 +563,7 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -571,19 +571,19 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with modelValue correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!--teleport end-->
@@ -593,14 +593,14 @@ exports[`NavigationMenu > renders with modelValue correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -609,9 +609,9 @@ exports[`NavigationMenu > renders with modelValue correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="open" data-orientation="horizontal">
+    <div data-slot="viewport" class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="open" data-orientation="horizontal">
       <!---->
       <!---->
     </div>
@@ -620,12 +620,12 @@ exports[`NavigationMenu > renders with modelValue correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -633,7 +633,7 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-highlighted"><span class="iconify i-lucide:box shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-highlighted"><span class="iconify i-lucide:box shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -644,14 +644,14 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -660,7 +660,7 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -668,12 +668,12 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with neutral variant link highlight correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -681,7 +681,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-highlighted after:bg-inverted"><span class="iconify i-lucide:box shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-highlighted after:bg-inverted"><span class="iconify i-lucide:box shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -692,14 +692,14 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -708,7 +708,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -716,12 +716,12 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
 `;
 
 exports[`NavigationMenu > renders with neutral variant link highlight neutral correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -729,7 +729,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-highlighted after:bg-inverted"><span class="iconify i-lucide:box shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-highlighted after:bg-inverted"><span class="iconify i-lucide:box shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -740,14 +740,14 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -756,7 +756,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -764,12 +764,12 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
 `;
 
 exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -777,7 +777,7 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-highlighted before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-highlighted before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -788,14 +788,14 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -804,7 +804,7 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -812,12 +812,12 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with neutral variant pill highlight correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -825,7 +825,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-elevated/50 text-highlighted hover:before:bg-elevated/50 before:transition-colors after:bg-inverted"><span class="iconify i-lucide:box shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-elevated/50 text-highlighted hover:before:bg-elevated/50 before:transition-colors after:bg-inverted"><span class="iconify i-lucide:box shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -836,14 +836,14 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -852,7 +852,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -860,12 +860,12 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
 `;
 
 exports[`NavigationMenu > renders with neutral variant pill highlight neutral correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -873,7 +873,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-elevated/50 text-highlighted hover:before:bg-elevated/50 before:transition-colors after:bg-inverted"><span class="iconify i-lucide:box shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-elevated/50 text-highlighted hover:before:bg-elevated/50 before:transition-colors after:bg-inverted"><span class="iconify i-lucide:box shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -884,14 +884,14 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -900,7 +900,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -908,18 +908,18 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
 `;
 
 exports[`NavigationMenu > renders with orientation vertical and collapsed correctly 1`] = `
-"<nav data-collapsed="true" class="relative flex gap-1.5 [&amp;>div]:min-w-0 flex-col" aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="true" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 flex-col" aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0" data-orientation="vertical">
-      <li data-menu-item="" class="min-w-0"></li>
-      <li data-menu-item="" class="min-w-0"><button type="button" data-reka-collection-item="" 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 px-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+    <ul data-slot="list" class="isolate min-w-0" data-orientation="vertical">
+      <li data-menu-item="" data-slot="item" class="min-w-0"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0"><button type="button" data-reka-collection-item="" data-slot="link" 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 px-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors" aria-hidden="true" data-slot="linkLeadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
         </button>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0"><button type="button" data-reka-collection-item="" data-active="" aria-current="page" 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 px-1.5 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0"><button type="button" data-reka-collection-item="" data-active="" aria-current="page" data-slot="link" 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 px-1.5 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true" data-slot="linkLeadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
         </button>
@@ -928,17 +928,17 @@ exports[`NavigationMenu > renders with orientation vertical and collapsed correc
       </li>
     </ul>
   </div>
-  <div class="px-2 h-px bg-border"></div>
+  <div data-slot="separator" class="px-2 h-px bg-border"></div>
   <div style="position: relative;">
-    <ul class="isolate min-w-0" data-orientation="vertical">
-      <li data-menu-item="" class="min-w-0"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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 px-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+    <ul data-slot="list" class="isolate min-w-0" data-orientation="vertical">
+      <li data-menu-item="" data-slot="item" class="min-w-0"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors" aria-hidden="true" data-slot="linkLeadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0"><button type="button" disabled="" data-reka-collection-item="" 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 cursor-not-allowed opacity-75 px-1.5"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 cursor-not-allowed opacity-75 px-1.5"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true" data-slot="linkLeadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
         </button>
@@ -953,39 +953,39 @@ exports[`NavigationMenu > renders with orientation vertical and collapsed correc
 `;
 
 exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 flex-col" aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="">
-  <ul class="isolate min-w-0">
-    <li data-state="closed" data-orientation="vertical" class="min-w-0">
-      <div class="w-full flex items-center gap-1.5 font-semibold text-xs/5 text-highlighted px-2.5 py-1.5">
-        <!--v-if--><span class="truncate">Links<!--v-if--></span>
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 flex-col" aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="">
+  <ul data-slot="list" class="isolate min-w-0">
+    <li data-state="closed" data-orientation="vertical" data-slot="item" class="min-w-0">
+      <div data-slot="label" class="w-full flex items-center gap-1.5 font-semibold text-xs/5 text-highlighted px-2.5 py-1.5">
+        <!--v-if--><span data-slot="linkLabel" class="truncate">Links<!--v-if--></span>
         <!--v-if-->
       </div>
       <!--v-if-->
     </li>
-    <li data-state="closed" data-orientation="vertical" class="min-w-0"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-1" data-reka-collection-item="" data-orientation="vertical" 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 px-2.5 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"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span aria-controls="" aria-expanded="false" data-state="closed" disabled="false" id="reka-accordion-trigger-v-0-0-1" data-reka-collection-item="" data-orientation="vertical" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+    <li data-state="closed" data-orientation="vertical" data-slot="item" class="min-w-0"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-1" data-reka-collection-item="" data-orientation="vertical" data-slot="link" 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 px-2.5 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"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span aria-controls="" aria-expanded="false" data-state="closed" disabled="false" id="reka-accordion-trigger-v-0-0-1" data-reka-collection-item="" data-orientation="vertical" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
       <!--v-if-->
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-1" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" 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="">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-1" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" 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="">
         <!--v-if-->
       </div>
     </li>
-    <li data-state="closed" data-orientation="vertical" class="min-w-0"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-3" data-reka-collection-item="" data-orientation="vertical" 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 px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span aria-controls="" aria-expanded="false" data-state="closed" disabled="false" id="reka-accordion-trigger-v-0-0-3" data-reka-collection-item="" data-orientation="vertical" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+    <li data-state="closed" data-orientation="vertical" data-slot="item" class="min-w-0"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-3" data-reka-collection-item="" data-orientation="vertical" data-slot="link" 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 px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span aria-controls="" aria-expanded="false" data-state="closed" disabled="false" id="reka-accordion-trigger-v-0-0-3" data-reka-collection-item="" data-orientation="vertical" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
       <!--v-if-->
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-3" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" 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-4" hidden="">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-3" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" 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-4" hidden="">
         <!--v-if-->
       </div>
     </li>
   </ul>
-  <div class="px-2 h-px bg-border"></div>
-  <ul class="isolate min-w-0">
-    <li data-state="closed" data-orientation="vertical" class="min-w-0"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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 px-2.5 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"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
+  <div data-slot="separator" class="px-2 h-px bg-border"></div>
+  <ul data-slot="list" class="isolate min-w-0">
+    <li data-state="closed" data-orientation="vertical" data-slot="item" class="min-w-0"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 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"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
         <!--v-if-->
       </a>
       <!--v-if-->
       <!--v-if-->
     </li>
-    <li data-state="closed" data-orientation="vertical" class="min-w-0"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+    <li data-state="closed" data-orientation="vertical" data-slot="item" class="min-w-0"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
         <!--v-if-->
       </button>
       <!--v-if-->
@@ -998,12 +998,12 @@ exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -1011,7 +1011,7 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -1022,14 +1022,14 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1038,7 +1038,7 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -1046,12 +1046,12 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with primary variant link highlight correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -1059,7 +1059,7 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-primary after:bg-primary"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-primary after:bg-primary"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -1070,14 +1070,14 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted transition-colors data-[state=open]:text-highlighted"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1086,7 +1086,7 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -1094,12 +1094,12 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
 `;
 
 exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -1107,7 +1107,7 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -1118,14 +1118,14 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1134,7 +1134,7 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -1142,12 +1142,12 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with primary variant pill highlight correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -1155,7 +1155,7 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-elevated/50 text-primary hover:before:bg-elevated/50 before:transition-colors after:bg-primary"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-elevated/50 text-primary hover:before:bg-elevated/50 before:transition-colors after:bg-primary"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -1166,14 +1166,14 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1182,7 +1182,7 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -1190,12 +1190,12 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
 `;
 
 exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><span class="iconify i-lucide:plus size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><span class="iconify i-lucide:plus size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -1203,7 +1203,7 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:plus size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:plus size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -1214,14 +1214,14 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1230,7 +1230,7 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -1238,12 +1238,12 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with ui correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -1251,7 +1251,7 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -1262,14 +1262,14 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1278,7 +1278,7 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -1286,19 +1286,19 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!--teleport end-->
@@ -1308,14 +1308,14 @@ exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1324,93 +1324,93 @@ exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
-      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden="">
-        <ul class="isolate grid p-2 grid-cols-2 gap-2">
-          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
-              <div class="min-w-0">
-                <p class="truncate font-medium">Introduction
+    <div data-slot="viewport" class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" data-slot="content" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden="">
+        <ul data-slot="childList" class="isolate grid p-2 grid-cols-2 gap-2">
+          <li data-slot="childItem" class=""><button type="button" data-reka-collection-item="" data-slot="childLink" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true" data-slot="childLinkIcon"></span>
+              <div data-slot="childLinkWrapper" class="min-w-0">
+                <p data-slot="childLinkLabel" class="truncate font-medium">Introduction
                   <!--v-if-->
                 </p>
-                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+                <p data-slot="childLinkDescription" class="text-muted">Fully styled and customizable components for Nuxt.</p>
               </div>
             </button></li>
-          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
-              <div class="min-w-0">
-                <p class="truncate font-medium">Installation
+          <li data-slot="childItem" class=""><button type="button" data-reka-collection-item="" data-slot="childLink" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true" data-slot="childLinkIcon"></span>
+              <div data-slot="childLinkWrapper" class="min-w-0">
+                <p data-slot="childLinkLabel" class="truncate font-medium">Installation
                   <!--v-if-->
                 </p>
-                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+                <p data-slot="childLinkDescription" class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
               </div>
             </button></li>
-          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
-              <div class="min-w-0">
-                <p class="truncate font-medium">Theming
+          <li data-slot="childItem" class=""><button type="button" data-reka-collection-item="" data-slot="childLink" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true" data-slot="childLinkIcon"></span>
+              <div data-slot="childLinkWrapper" class="min-w-0">
+                <p data-slot="childLinkLabel" class="truncate font-medium">Theming
                   <!--v-if-->
                 </p>
-                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+                <p data-slot="childLinkDescription" class="text-muted">Learn how to customize the look and feel of the components.</p>
               </div>
             </button></li>
-          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
-              <div class="min-w-0">
-                <p class="truncate font-medium">Shortcuts
+          <li data-slot="childItem" class=""><button type="button" data-reka-collection-item="" data-slot="childLink" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true" data-slot="childLinkIcon"></span>
+              <div data-slot="childLinkWrapper" class="min-w-0">
+                <p data-slot="childLinkLabel" class="truncate font-medium">Shortcuts
                   <!--v-if-->
                 </p>
-                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+                <p data-slot="childLinkDescription" class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
               </div>
             </button></li>
         </ul>
       </div>
-      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden="">
-        <ul class="isolate grid p-2 grid-cols-2 gap-2">
-          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
-              <div class="min-w-0">
-                <p class="truncate font-medium">Link
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" data-slot="content" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden="">
+        <ul data-slot="childList" class="isolate grid p-2 grid-cols-2 gap-2">
+          <li data-slot="childItem" class=""><a href="/components/link" data-reka-collection-item="" data-slot="childLink" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true" data-slot="childLinkIcon"></span>
+              <div data-slot="childLinkWrapper" class="min-w-0">
+                <p data-slot="childLinkLabel" class="truncate font-medium">Link
                   <!--v-if-->
                 </p>
-                <p class="text-muted">Use NuxtLink with superpowers.</p>
+                <p data-slot="childLinkDescription" class="text-muted">Use NuxtLink with superpowers.</p>
               </div>
             </a></li>
-          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
-              <div class="min-w-0">
-                <p class="truncate font-medium">Modal
+          <li data-slot="childItem" class=""><a href="/components/modal" data-reka-collection-item="" data-slot="childLink" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true" data-slot="childLinkIcon"></span>
+              <div data-slot="childLinkWrapper" class="min-w-0">
+                <p data-slot="childLinkLabel" class="truncate font-medium">Modal
                   <!--v-if-->
                 </p>
-                <p class="text-muted">Display a modal within your application.</p>
+                <p data-slot="childLinkDescription" class="text-muted">Display a modal within your application.</p>
               </div>
             </a></li>
-          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
-              <div class="min-w-0">
-                <p class="truncate font-medium">NavigationMenu
+          <li data-slot="childItem" class=""><a href="/components/navigation-menu" data-reka-collection-item="" data-slot="childLink" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true" data-slot="childLinkIcon"></span>
+              <div data-slot="childLinkWrapper" class="min-w-0">
+                <p data-slot="childLinkLabel" class="truncate font-medium">NavigationMenu
                   <!--v-if-->
                 </p>
-                <p class="text-muted">Display a list of links.</p>
+                <p data-slot="childLinkDescription" class="text-muted">Display a list of links.</p>
               </div>
             </a></li>
-          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
-              <div class="min-w-0">
-                <p class="truncate font-medium">Pagination
+          <li data-slot="childItem" class=""><a href="/components/pagination" data-reka-collection-item="" data-slot="childLink" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true" data-slot="childLinkIcon"></span>
+              <div data-slot="childLinkWrapper" class="min-w-0">
+                <p data-slot="childLinkLabel" class="truncate font-medium">Pagination
                   <!--v-if-->
                 </p>
-                <p class="text-muted">Display a list of pages.</p>
+                <p data-slot="childLinkDescription" class="text-muted">Display a list of pages.</p>
               </div>
             </a></li>
-          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
-              <div class="min-w-0">
-                <p class="truncate font-medium">Popover
+          <li data-slot="childItem" class=""><a href="/components/popover" data-reka-collection-item="" data-slot="childLink" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true" data-slot="childLinkIcon"></span>
+              <div data-slot="childLinkWrapper" class="min-w-0">
+                <p data-slot="childLinkLabel" class="truncate font-medium">Popover
                   <!--v-if-->
                 </p>
-                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+                <p data-slot="childLinkDescription" class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
               </div>
             </a></li>
-          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
-              <div class="min-w-0">
-                <p class="truncate font-medium">Progress
+          <li data-slot="childItem" class=""><a href="/components/progress" data-reka-collection-item="" data-slot="childLink" class="group relative size-full flex items-start text-start 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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true" data-slot="childLinkIcon"></span>
+              <div data-slot="childLinkWrapper" class="min-w-0">
+                <p data-slot="childLinkLabel" class="truncate font-medium">Progress
                   <!--v-if-->
                 </p>
-                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+                <p data-slot="childLinkDescription" class="text-muted">Show a horizontal bar to indicate task progression.</p>
               </div>
             </a></li>
         </ul>
@@ -1421,12 +1421,12 @@ exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders without externalIcon correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
+          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
         </button>
         <!--v-if-->
         <!--teleport start-->
@@ -1434,7 +1434,7 @@ exports[`NavigationMenu > renders without externalIcon correctly 1`] = `
         <!--teleport end-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
         <!---->
@@ -1445,14 +1445,14 @@ exports[`NavigationMenu > renders without externalIcon correctly 1`] = `
   </div>
   <!--v-if-->
   <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">GitHub<!--v-if--></span>
+    <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">GitHub<!--v-if--></span>
           <!--v-if-->
         </a>
         <!--v-if-->
         <!--v-if-->
       </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" 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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1461,7 +1461,7 @@ exports[`NavigationMenu > renders without externalIcon correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full justify-center">
+  <div data-slot="viewportWrapper" class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
diff --git a/test/components/__snapshots__/Page-vue.spec.ts.snap b/test/components/__snapshots__/Page-vue.spec.ts.snap
index a02b2e44cb..6be0e225f9 100644
--- a/test/components/__snapshots__/Page-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Page-vue.spec.ts.snap
@@ -1,48 +1,48 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Page > renders with all slots correctly 1`] = `"<div class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10">Left slot<div class="lg:col-span-6">Default slot</div>Right slot</div>"`;
+exports[`Page > renders with all slots correctly 1`] = `"<div data-slot="root" class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10">Left slot<div data-slot="center" class="lg:col-span-6">Default slot</div>Right slot</div>"`;
 
 exports[`Page > renders with as correctly 1`] = `
-"<section class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10">
+"<section data-slot="root" class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10">
   <!--v-if-->
-  <div class="lg:col-span-10"></div>
+  <div data-slot="center" class="lg:col-span-10"></div>
   <!--v-if-->
 </section>"
 `;
 
 exports[`Page > renders with class correctly 1`] = `
-"<div class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-4">
+"<div data-slot="root" class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-4">
   <!--v-if-->
-  <div class="lg:col-span-10"></div>
+  <div data-slot="center" class="lg:col-span-10"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Page > renders with default slot correctly 1`] = `
-"<div class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10">
+"<div data-slot="root" class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10">
   <!--v-if-->
-  <div class="lg:col-span-10">Default slot</div>
+  <div data-slot="center" class="lg:col-span-10">Default slot</div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Page > renders with left slot correctly 1`] = `
-"<div class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10">Left slot<div class="lg:col-span-8"></div>
+"<div data-slot="root" class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10">Left slot<div data-slot="center" class="lg:col-span-8"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Page > renders with right slot correctly 1`] = `
-"<div class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10">
+"<div data-slot="root" class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10">
   <!--v-if-->
-  <div class="lg:col-span-8"></div>Right slot
+  <div data-slot="center" class="lg:col-span-8"></div>Right slot
 </div>"
 `;
 
 exports[`Page > renders with ui correctly 1`] = `
-"<div class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10">
+"<div data-slot="root" class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10">
   <!--v-if-->
-  <div class="lg:col-span-10"></div>
+  <div data-slot="center" class="lg:col-span-10"></div>
   <!--v-if-->
 </div>"
 `;
diff --git a/test/components/__snapshots__/Page.spec.ts.snap b/test/components/__snapshots__/Page.spec.ts.snap
index a02b2e44cb..6be0e225f9 100644
--- a/test/components/__snapshots__/Page.spec.ts.snap
+++ b/test/components/__snapshots__/Page.spec.ts.snap
@@ -1,48 +1,48 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Page > renders with all slots correctly 1`] = `"<div class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10">Left slot<div class="lg:col-span-6">Default slot</div>Right slot</div>"`;
+exports[`Page > renders with all slots correctly 1`] = `"<div data-slot="root" class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10">Left slot<div data-slot="center" class="lg:col-span-6">Default slot</div>Right slot</div>"`;
 
 exports[`Page > renders with as correctly 1`] = `
-"<section class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10">
+"<section data-slot="root" class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10">
   <!--v-if-->
-  <div class="lg:col-span-10"></div>
+  <div data-slot="center" class="lg:col-span-10"></div>
   <!--v-if-->
 </section>"
 `;
 
 exports[`Page > renders with class correctly 1`] = `
-"<div class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-4">
+"<div data-slot="root" class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-4">
   <!--v-if-->
-  <div class="lg:col-span-10"></div>
+  <div data-slot="center" class="lg:col-span-10"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Page > renders with default slot correctly 1`] = `
-"<div class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10">
+"<div data-slot="root" class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10">
   <!--v-if-->
-  <div class="lg:col-span-10">Default slot</div>
+  <div data-slot="center" class="lg:col-span-10">Default slot</div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Page > renders with left slot correctly 1`] = `
-"<div class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10">Left slot<div class="lg:col-span-8"></div>
+"<div data-slot="root" class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10">Left slot<div data-slot="center" class="lg:col-span-8"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Page > renders with right slot correctly 1`] = `
-"<div class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10">
+"<div data-slot="root" class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10">
   <!--v-if-->
-  <div class="lg:col-span-8"></div>Right slot
+  <div data-slot="center" class="lg:col-span-8"></div>Right slot
 </div>"
 `;
 
 exports[`Page > renders with ui correctly 1`] = `
-"<div class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10">
+"<div data-slot="root" class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10">
   <!--v-if-->
-  <div class="lg:col-span-10"></div>
+  <div data-slot="center" class="lg:col-span-10"></div>
   <!--v-if-->
 </div>"
 `;
diff --git a/test/components/__snapshots__/PageAnchors-vue.spec.ts.snap b/test/components/__snapshots__/PageAnchors-vue.spec.ts.snap
index b36aee559d..f7f363d5dc 100644
--- a/test/components/__snapshots__/PageAnchors-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PageAnchors-vue.spec.ts.snap
@@ -1,144 +1,144 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PageAnchors > renders with as correctly 1`] = `
-"<div class="">
-  <ul class="">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-4 shrink-0"></svg></div><span class="truncate">Documentation<!--v-if--></span>
+"<div data-slot="root" class="">
+  <ul data-slot="list" class="">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-4 shrink-0"></svg></div><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="/playground" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-4 shrink-0"></svg></div><span class="truncate">Playground<!--v-if--></span>
+    <li data-slot="item" class="relative"><a href="/playground" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-4 shrink-0"></svg></div><span data-slot="linkLabel" class="truncate">Playground<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="/roadmap" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-4 shrink-0"></svg></div><span class="truncate">Roadmap<!--v-if--></span>
+    <li data-slot="item" class="relative"><a href="/roadmap" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-4 shrink-0"></svg></div><span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-4 shrink-0"></svg></div><span class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed"></svg></span>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-4 shrink-0"></svg></div><span data-slot="linkLabel" class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed"></svg></span>
       </a></li>
   </ul>
 </div>"
 `;
 
 exports[`PageAnchors > renders with class correctly 1`] = `
-"<nav class="lg:mb-12">
-  <ul class="">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-4 shrink-0"></svg></div><span class="truncate">Documentation<!--v-if--></span>
+"<nav data-slot="root" class="lg:mb-12">
+  <ul data-slot="list" class="">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-4 shrink-0"></svg></div><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="/playground" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-4 shrink-0"></svg></div><span class="truncate">Playground<!--v-if--></span>
+    <li data-slot="item" class="relative"><a href="/playground" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-4 shrink-0"></svg></div><span data-slot="linkLabel" class="truncate">Playground<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="/roadmap" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-4 shrink-0"></svg></div><span class="truncate">Roadmap<!--v-if--></span>
+    <li data-slot="item" class="relative"><a href="/roadmap" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-4 shrink-0"></svg></div><span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-4 shrink-0"></svg></div><span class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed"></svg></span>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-4 shrink-0"></svg></div><span data-slot="linkLabel" class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed"></svg></span>
       </a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageAnchors > renders with link slot correctly 1`] = `
-"<nav class="">
-  <ul class="">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">Link slot</a></li>
-    <li class="relative"><a href="/playground" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">Link slot</a></li>
-    <li class="relative"><a href="/roadmap" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">Link slot</a></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">Link slot</a></li>
+"<nav data-slot="root" class="">
+  <ul data-slot="list" class="">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">Link slot</a></li>
+    <li data-slot="item" class="relative"><a href="/playground" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">Link slot</a></li>
+    <li data-slot="item" class="relative"><a href="/roadmap" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">Link slot</a></li>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">Link slot</a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageAnchors > renders with link-label slot correctly 1`] = `
-"<nav class="">
-  <ul class="">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-4 shrink-0"></svg></div><span class="truncate">Link label slot<!--v-if--></span>
+"<nav data-slot="root" class="">
+  <ul data-slot="list" class="">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-4 shrink-0"></svg></div><span data-slot="linkLabel" class="truncate">Link label slot<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="/playground" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-4 shrink-0"></svg></div><span class="truncate">Link label slot<!--v-if--></span>
+    <li data-slot="item" class="relative"><a href="/playground" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-4 shrink-0"></svg></div><span data-slot="linkLabel" class="truncate">Link label slot<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="/roadmap" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-4 shrink-0"></svg></div><span class="truncate">Link label slot<!--v-if--></span>
+    <li data-slot="item" class="relative"><a href="/roadmap" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-4 shrink-0"></svg></div><span data-slot="linkLabel" class="truncate">Link label slot<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-4 shrink-0"></svg></div><span class="truncate">Link label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed"></svg></span>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-4 shrink-0"></svg></div><span data-slot="linkLabel" class="truncate">Link label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed"></svg></span>
       </a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageAnchors > renders with link-leading slot correctly 1`] = `
-"<nav class="">
-  <ul class="">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition">Link leading slot</div><span class="truncate">Documentation<!--v-if--></span>
+"<nav data-slot="root" class="">
+  <ul data-slot="list" class="">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition">Link leading slot</div><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="/playground" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition">Link leading slot</div><span class="truncate">Playground<!--v-if--></span>
+    <li data-slot="item" class="relative"><a href="/playground" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition">Link leading slot</div><span data-slot="linkLabel" class="truncate">Playground<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="/roadmap" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted">Link leading slot</div><span class="truncate">Roadmap<!--v-if--></span>
+    <li data-slot="item" class="relative"><a href="/roadmap" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted">Link leading slot</div><span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition">Link leading slot</div><span class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed"></svg></span>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition">Link leading slot</div><span data-slot="linkLabel" class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed"></svg></span>
       </a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageAnchors > renders with link-trailing slot correctly 1`] = `
-"<nav class="">
-  <ul class="">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-4 shrink-0"></svg></div><span class="truncate">Documentation<!--v-if--></span>Link trailing slot
+"<nav data-slot="root" class="">
+  <ul data-slot="list" class="">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-4 shrink-0"></svg></div><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>Link trailing slot
       </a></li>
-    <li class="relative"><a href="/playground" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-4 shrink-0"></svg></div><span class="truncate">Playground<!--v-if--></span>Link trailing slot
+    <li data-slot="item" class="relative"><a href="/playground" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-4 shrink-0"></svg></div><span data-slot="linkLabel" class="truncate">Playground<!--v-if--></span>Link trailing slot
       </a></li>
-    <li class="relative"><a href="/roadmap" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-4 shrink-0"></svg></div><span class="truncate">Roadmap<!--v-if--></span>Link trailing slot
+    <li data-slot="item" class="relative"><a href="/roadmap" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-4 shrink-0"></svg></div><span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span>Link trailing slot
       </a></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-4 shrink-0"></svg></div><span class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed"></svg></span>Link trailing slot
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-4 shrink-0"></svg></div><span data-slot="linkLabel" class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed"></svg></span>Link trailing slot
       </a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageAnchors > renders with links correctly 1`] = `
-"<nav class="">
-  <ul class="">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-4 shrink-0"></svg></div><span class="truncate">Documentation<!--v-if--></span>
+"<nav data-slot="root" class="">
+  <ul data-slot="list" class="">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-4 shrink-0"></svg></div><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="/playground" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-4 shrink-0"></svg></div><span class="truncate">Playground<!--v-if--></span>
+    <li data-slot="item" class="relative"><a href="/playground" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-4 shrink-0"></svg></div><span data-slot="linkLabel" class="truncate">Playground<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="/roadmap" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-4 shrink-0"></svg></div><span class="truncate">Roadmap<!--v-if--></span>
+    <li data-slot="item" class="relative"><a href="/roadmap" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-4 shrink-0"></svg></div><span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-4 shrink-0"></svg></div><span class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed"></svg></span>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-4 shrink-0"></svg></div><span data-slot="linkLabel" class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed"></svg></span>
       </a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageAnchors > renders with ui correctly 1`] = `
-"<nav class="">
-  <ul class="gap-6">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-4 shrink-0"></svg></div><span class="truncate">Documentation<!--v-if--></span>
+"<nav data-slot="root" class="">
+  <ul data-slot="list" class="gap-6">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-4 shrink-0"></svg></div><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="/playground" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-4 shrink-0"></svg></div><span class="truncate">Playground<!--v-if--></span>
+    <li data-slot="item" class="relative"><a href="/playground" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-4 shrink-0"></svg></div><span data-slot="linkLabel" class="truncate">Playground<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="/roadmap" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-4 shrink-0"></svg></div><span class="truncate">Roadmap<!--v-if--></span>
+    <li data-slot="item" class="relative"><a href="/roadmap" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-4 shrink-0"></svg></div><span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-4 shrink-0"></svg></div><span class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed"></svg></span>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-4 shrink-0"></svg></div><span data-slot="linkLabel" class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed"></svg></span>
       </a></li>
   </ul>
 </nav>"
diff --git a/test/components/__snapshots__/PageAnchors.spec.ts.snap b/test/components/__snapshots__/PageAnchors.spec.ts.snap
index 6a4eba5a3b..b2fa6f181a 100644
--- a/test/components/__snapshots__/PageAnchors.spec.ts.snap
+++ b/test/components/__snapshots__/PageAnchors.spec.ts.snap
@@ -1,144 +1,144 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PageAnchors > renders with as correctly 1`] = `
-"<div class="">
-  <ul class="">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-lucide:book-open size-4 shrink-0" aria-hidden="true"></span></div><span class="truncate">Documentation<!--v-if--></span>
+"<div data-slot="root" class="">
+  <ul data-slot="list" class="">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-lucide:book-open size-4 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span></div><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="/playground" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-simple-icons:stackblitz size-4 shrink-0" aria-hidden="true"></span></div><span class="truncate">Playground<!--v-if--></span>
+    <li data-slot="item" class="relative"><a href="/playground" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-simple-icons:stackblitz size-4 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span></div><span data-slot="linkLabel" class="truncate">Playground<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="/roadmap" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted"><span class="iconify i-lucide:map size-4 shrink-0" aria-hidden="true"></span></div><span class="truncate">Roadmap<!--v-if--></span>
+    <li data-slot="item" class="relative"><a href="/roadmap" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted"><span class="iconify i-lucide:map size-4 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span></div><span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-lucide:rocket size-4 shrink-0" aria-hidden="true"></span></div><span class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true"></span></span>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-lucide:rocket size-4 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span></div><span data-slot="linkLabel" class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
       </a></li>
   </ul>
 </div>"
 `;
 
 exports[`PageAnchors > renders with class correctly 1`] = `
-"<nav class="lg:mb-12">
-  <ul class="">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-lucide:book-open size-4 shrink-0" aria-hidden="true"></span></div><span class="truncate">Documentation<!--v-if--></span>
+"<nav data-slot="root" class="lg:mb-12">
+  <ul data-slot="list" class="">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-lucide:book-open size-4 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span></div><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="/playground" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-simple-icons:stackblitz size-4 shrink-0" aria-hidden="true"></span></div><span class="truncate">Playground<!--v-if--></span>
+    <li data-slot="item" class="relative"><a href="/playground" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-simple-icons:stackblitz size-4 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span></div><span data-slot="linkLabel" class="truncate">Playground<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="/roadmap" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted"><span class="iconify i-lucide:map size-4 shrink-0" aria-hidden="true"></span></div><span class="truncate">Roadmap<!--v-if--></span>
+    <li data-slot="item" class="relative"><a href="/roadmap" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted"><span class="iconify i-lucide:map size-4 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span></div><span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-lucide:rocket size-4 shrink-0" aria-hidden="true"></span></div><span class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true"></span></span>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-lucide:rocket size-4 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span></div><span data-slot="linkLabel" class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
       </a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageAnchors > renders with link slot correctly 1`] = `
-"<nav class="">
-  <ul class="">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">Link slot</a></li>
-    <li class="relative"><a href="/playground" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">Link slot</a></li>
-    <li class="relative"><a href="/roadmap" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">Link slot</a></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">Link slot</a></li>
+"<nav data-slot="root" class="">
+  <ul data-slot="list" class="">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">Link slot</a></li>
+    <li data-slot="item" class="relative"><a href="/playground" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">Link slot</a></li>
+    <li data-slot="item" class="relative"><a href="/roadmap" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">Link slot</a></li>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">Link slot</a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageAnchors > renders with link-label slot correctly 1`] = `
-"<nav class="">
-  <ul class="">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-lucide:book-open size-4 shrink-0" aria-hidden="true"></span></div><span class="truncate">Link label slot<!--v-if--></span>
+"<nav data-slot="root" class="">
+  <ul data-slot="list" class="">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-lucide:book-open size-4 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span></div><span data-slot="linkLabel" class="truncate">Link label slot<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="/playground" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-simple-icons:stackblitz size-4 shrink-0" aria-hidden="true"></span></div><span class="truncate">Link label slot<!--v-if--></span>
+    <li data-slot="item" class="relative"><a href="/playground" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-simple-icons:stackblitz size-4 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span></div><span data-slot="linkLabel" class="truncate">Link label slot<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="/roadmap" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted"><span class="iconify i-lucide:map size-4 shrink-0" aria-hidden="true"></span></div><span class="truncate">Link label slot<!--v-if--></span>
+    <li data-slot="item" class="relative"><a href="/roadmap" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted"><span class="iconify i-lucide:map size-4 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span></div><span data-slot="linkLabel" class="truncate">Link label slot<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-lucide:rocket size-4 shrink-0" aria-hidden="true"></span></div><span class="truncate">Link label slot<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true"></span></span>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-lucide:rocket size-4 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span></div><span data-slot="linkLabel" class="truncate">Link label slot<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
       </a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageAnchors > renders with link-leading slot correctly 1`] = `
-"<nav class="">
-  <ul class="">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition">Link leading slot</div><span class="truncate">Documentation<!--v-if--></span>
+"<nav data-slot="root" class="">
+  <ul data-slot="list" class="">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition">Link leading slot</div><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="/playground" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition">Link leading slot</div><span class="truncate">Playground<!--v-if--></span>
+    <li data-slot="item" class="relative"><a href="/playground" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition">Link leading slot</div><span data-slot="linkLabel" class="truncate">Playground<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="/roadmap" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted">Link leading slot</div><span class="truncate">Roadmap<!--v-if--></span>
+    <li data-slot="item" class="relative"><a href="/roadmap" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted">Link leading slot</div><span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition">Link leading slot</div><span class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true"></span></span>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition">Link leading slot</div><span data-slot="linkLabel" class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
       </a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageAnchors > renders with link-trailing slot correctly 1`] = `
-"<nav class="">
-  <ul class="">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-lucide:book-open size-4 shrink-0" aria-hidden="true"></span></div><span class="truncate">Documentation<!--v-if--></span>Link trailing slot
+"<nav data-slot="root" class="">
+  <ul data-slot="list" class="">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-lucide:book-open size-4 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span></div><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>Link trailing slot
       </a></li>
-    <li class="relative"><a href="/playground" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-simple-icons:stackblitz size-4 shrink-0" aria-hidden="true"></span></div><span class="truncate">Playground<!--v-if--></span>Link trailing slot
+    <li data-slot="item" class="relative"><a href="/playground" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-simple-icons:stackblitz size-4 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span></div><span data-slot="linkLabel" class="truncate">Playground<!--v-if--></span>Link trailing slot
       </a></li>
-    <li class="relative"><a href="/roadmap" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted"><span class="iconify i-lucide:map size-4 shrink-0" aria-hidden="true"></span></div><span class="truncate">Roadmap<!--v-if--></span>Link trailing slot
+    <li data-slot="item" class="relative"><a href="/roadmap" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted"><span class="iconify i-lucide:map size-4 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span></div><span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span>Link trailing slot
       </a></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-lucide:rocket size-4 shrink-0" aria-hidden="true"></span></div><span class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true"></span></span>Link trailing slot
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-lucide:rocket size-4 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span></div><span data-slot="linkLabel" class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>Link trailing slot
       </a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageAnchors > renders with links correctly 1`] = `
-"<nav class="">
-  <ul class="">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-lucide:book-open size-4 shrink-0" aria-hidden="true"></span></div><span class="truncate">Documentation<!--v-if--></span>
+"<nav data-slot="root" class="">
+  <ul data-slot="list" class="">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-lucide:book-open size-4 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span></div><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="/playground" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-simple-icons:stackblitz size-4 shrink-0" aria-hidden="true"></span></div><span class="truncate">Playground<!--v-if--></span>
+    <li data-slot="item" class="relative"><a href="/playground" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-simple-icons:stackblitz size-4 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span></div><span data-slot="linkLabel" class="truncate">Playground<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="/roadmap" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted"><span class="iconify i-lucide:map size-4 shrink-0" aria-hidden="true"></span></div><span class="truncate">Roadmap<!--v-if--></span>
+    <li data-slot="item" class="relative"><a href="/roadmap" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted"><span class="iconify i-lucide:map size-4 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span></div><span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-lucide:rocket size-4 shrink-0" aria-hidden="true"></span></div><span class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true"></span></span>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-lucide:rocket size-4 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span></div><span data-slot="linkLabel" class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
       </a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageAnchors > renders with ui correctly 1`] = `
-"<nav class="">
-  <ul class="gap-6">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-lucide:book-open size-4 shrink-0" aria-hidden="true"></span></div><span class="truncate">Documentation<!--v-if--></span>
+"<nav data-slot="root" class="">
+  <ul data-slot="list" class="gap-6">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-lucide:book-open size-4 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span></div><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="/playground" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-simple-icons:stackblitz size-4 shrink-0" aria-hidden="true"></span></div><span class="truncate">Playground<!--v-if--></span>
+    <li data-slot="item" class="relative"><a href="/playground" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-simple-icons:stackblitz size-4 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span></div><span data-slot="linkLabel" class="truncate">Playground<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="/roadmap" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted"><span class="iconify i-lucide:map size-4 shrink-0" aria-hidden="true"></span></div><span class="truncate">Roadmap<!--v-if--></span>
+    <li data-slot="item" class="relative"><a href="/roadmap" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-primary font-semibold">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-primary ring-primary text-inverted"><span class="iconify i-lucide:map size-4 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span></div><span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span>
       </a></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
-        <div class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-lucide:rocket size-4 shrink-0" aria-hidden="true"></span></div><span class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true"></span></span>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary text-muted hover:text-default font-medium transition-colors">
+        <div data-slot="linkLeading" class="rounded-md p-1 inline-flex ring-inset ring bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted transition"><span class="iconify i-lucide:rocket size-4 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span></div><span data-slot="linkLabel" class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>
       </a></li>
   </ul>
 </nav>"
diff --git a/test/components/__snapshots__/PageAside-vue.spec.ts.snap b/test/components/__snapshots__/PageAside-vue.spec.ts.snap
index 97a80fbfdd..1f90fb02e5 100644
--- a/test/components/__snapshots__/PageAside-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PageAside-vue.spec.ts.snap
@@ -1,52 +1,52 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PageAside > renders with as correctly 1`] = `
-"<div class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5">
-  <div class="relative">
+"<div data-slot="root" class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5">
+  <div data-slot="container" class="relative">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`PageAside > renders with bottom slot correctly 1`] = `
-"<aside class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5">
-  <div class="relative">
+"<aside data-slot="root" class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5">
+  <div data-slot="container" class="relative">
     <!--v-if-->Bottom slot
   </div>
 </aside>"
 `;
 
 exports[`PageAside > renders with class correctly 1`] = `
-"<aside class="hidden overflow-y-auto lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5 lg:flex">
-  <div class="relative">
+"<aside data-slot="root" class="hidden overflow-y-auto lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5 lg:flex">
+  <div data-slot="container" class="relative">
     <!--v-if-->
   </div>
 </aside>"
 `;
 
 exports[`PageAside > renders with default slot correctly 1`] = `
-"<aside class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5">
-  <div class="relative">
+"<aside data-slot="root" class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5">
+  <div data-slot="container" class="relative">
     <!--v-if-->Default slot
   </div>
 </aside>"
 `;
 
 exports[`PageAside > renders with top slot correctly 1`] = `
-"<aside class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5">
-  <div class="relative">
-    <div class="sticky -top-8 -mt-8 pointer-events-none z-[1]">
-      <div class="h-8 bg-default -mx-4 px-4"></div>
-      <div class="bg-default relative pointer-events-auto flex flex-col -mx-4 px-4">Top slot</div>
-      <div class="h-8 bg-gradient-to-b from-default -mx-4 px-4"></div>
+"<aside data-slot="root" class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5">
+  <div data-slot="container" class="relative">
+    <div data-slot="top" class="sticky -top-8 -mt-8 pointer-events-none z-[1]">
+      <div data-slot="topHeader" class="h-8 bg-default -mx-4 px-4"></div>
+      <div data-slot="topBody" class="bg-default relative pointer-events-auto flex flex-col -mx-4 px-4">Top slot</div>
+      <div data-slot="topFooter" class="h-8 bg-gradient-to-b from-default -mx-4 px-4"></div>
     </div>
   </div>
 </aside>"
 `;
 
 exports[`PageAside > renders with ui correctly 1`] = `
-"<aside class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5">
-  <div class="absolute">
+"<aside data-slot="root" class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5">
+  <div data-slot="container" class="absolute">
     <!--v-if-->
   </div>
 </aside>"
diff --git a/test/components/__snapshots__/PageAside.spec.ts.snap b/test/components/__snapshots__/PageAside.spec.ts.snap
index 97a80fbfdd..1f90fb02e5 100644
--- a/test/components/__snapshots__/PageAside.spec.ts.snap
+++ b/test/components/__snapshots__/PageAside.spec.ts.snap
@@ -1,52 +1,52 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PageAside > renders with as correctly 1`] = `
-"<div class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5">
-  <div class="relative">
+"<div data-slot="root" class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5">
+  <div data-slot="container" class="relative">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`PageAside > renders with bottom slot correctly 1`] = `
-"<aside class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5">
-  <div class="relative">
+"<aside data-slot="root" class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5">
+  <div data-slot="container" class="relative">
     <!--v-if-->Bottom slot
   </div>
 </aside>"
 `;
 
 exports[`PageAside > renders with class correctly 1`] = `
-"<aside class="hidden overflow-y-auto lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5 lg:flex">
-  <div class="relative">
+"<aside data-slot="root" class="hidden overflow-y-auto lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5 lg:flex">
+  <div data-slot="container" class="relative">
     <!--v-if-->
   </div>
 </aside>"
 `;
 
 exports[`PageAside > renders with default slot correctly 1`] = `
-"<aside class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5">
-  <div class="relative">
+"<aside data-slot="root" class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5">
+  <div data-slot="container" class="relative">
     <!--v-if-->Default slot
   </div>
 </aside>"
 `;
 
 exports[`PageAside > renders with top slot correctly 1`] = `
-"<aside class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5">
-  <div class="relative">
-    <div class="sticky -top-8 -mt-8 pointer-events-none z-[1]">
-      <div class="h-8 bg-default -mx-4 px-4"></div>
-      <div class="bg-default relative pointer-events-auto flex flex-col -mx-4 px-4">Top slot</div>
-      <div class="h-8 bg-gradient-to-b from-default -mx-4 px-4"></div>
+"<aside data-slot="root" class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5">
+  <div data-slot="container" class="relative">
+    <div data-slot="top" class="sticky -top-8 -mt-8 pointer-events-none z-[1]">
+      <div data-slot="topHeader" class="h-8 bg-default -mx-4 px-4"></div>
+      <div data-slot="topBody" class="bg-default relative pointer-events-auto flex flex-col -mx-4 px-4">Top slot</div>
+      <div data-slot="topFooter" class="h-8 bg-gradient-to-b from-default -mx-4 px-4"></div>
     </div>
   </div>
 </aside>"
 `;
 
 exports[`PageAside > renders with ui correctly 1`] = `
-"<aside class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5">
-  <div class="absolute">
+"<aside data-slot="root" class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5">
+  <div data-slot="container" class="absolute">
     <!--v-if-->
   </div>
 </aside>"
diff --git a/test/components/__snapshots__/PageCTA-vue.spec.ts.snap b/test/components/__snapshots__/PageCTA-vue.spec.ts.snap
index bc6aa5c5ab..83492e921d 100644
--- a/test/components/__snapshots__/PageCTA-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PageCTA-vue.spec.ts.snap
@@ -1,17 +1,17 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PageCTA > renders with as correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16"></div>
+"<section data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container"></div>
 </section>"
 `;
 
 exports[`PageCTA > renders with body slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16">
-    <div class="">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
-      <div class="mt-8">Body slot</div>
+      <div data-slot="body" class="mt-8">Body slot</div>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -20,32 +20,32 @@ exports[`PageCTA > renders with body slot correctly 1`] = `
 `;
 
 exports[`PageCTA > renders with bottom slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16"></div>Bottom slot
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container"></div>Bottom slot
 </div>"
 `;
 
 exports[`PageCTA > renders with class correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate overflow-hidden bg-default ring ring-default rounded-none">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16"></div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate overflow-hidden bg-default ring ring-default rounded-none">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container"></div>
 </div>"
 `;
 
 exports[`PageCTA > renders with default slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container">
     <!--v-if-->Default slot
   </div>
 </div>"
 `;
 
 exports[`PageCTA > renders with description correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
         <!--v-if-->
-        <div class="text-base sm:text-lg text-center text-balance text-muted">Description</div>
+        <div data-slot="description" class="text-base sm:text-lg text-center text-balance text-muted">Description</div>
       </div>
       <!--v-if-->
       <!--v-if-->
@@ -56,12 +56,12 @@ exports[`PageCTA > renders with description correctly 1`] = `
 `;
 
 exports[`PageCTA > renders with description slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
         <!--v-if-->
-        <div class="text-base sm:text-lg text-center text-balance text-muted">Description slot</div>
+        <div data-slot="description" class="text-base sm:text-lg text-center text-balance text-muted">Description slot</div>
       </div>
       <!--v-if-->
       <!--v-if-->
@@ -72,12 +72,12 @@ exports[`PageCTA > renders with description slot correctly 1`] = `
 `;
 
 exports[`PageCTA > renders with footer slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16">
-    <div class="">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-      <div class="mt-8">Footer slot</div>
+      <div data-slot="footer" class="mt-8">Footer slot</div>
     </div>
     <!--v-if-->
   </div>
@@ -85,10 +85,10 @@ exports[`PageCTA > renders with footer slot correctly 1`] = `
 `;
 
 exports[`PageCTA > renders with header slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">Header slot</div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">Header slot</div>
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -98,14 +98,14 @@ exports[`PageCTA > renders with header slot correctly 1`] = `
 `;
 
 exports[`PageCTA > renders with links correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16">
-    <div class="">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-      <div class="mt-8">
-        <div class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-            <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="footer" class="mt-8">
+        <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
       </div>
@@ -116,13 +116,13 @@ exports[`PageCTA > renders with links correctly 1`] = `
 `;
 
 exports[`PageCTA > renders with links slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16">
-    <div class="">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-      <div class="mt-8">
-        <div class="flex flex-wrap gap-x-6 gap-y-3 justify-center">Links slot</div>
+      <div data-slot="footer" class="mt-8">
+        <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center">Links slot</div>
       </div>
     </div>
     <!--v-if-->
@@ -131,8 +131,8 @@ exports[`PageCTA > renders with links slot correctly 1`] = `
 `;
 
 exports[`PageCTA > renders with orientation horizontal correctly 1`] = `
-"<div data-orientation="horizontal" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center">
+"<div data-orientation="horizontal" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center" data-slot="container">
     <!--v-if-->
     <div class="hidden lg:block"></div>
   </div>
@@ -140,14 +140,14 @@ exports[`PageCTA > renders with orientation horizontal correctly 1`] = `
 `;
 
 exports[`PageCTA > renders with orientation horizontal links correctly 1`] = `
-"<div data-orientation="horizontal" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center">
-    <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center" data-slot="container">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-      <div class="mt-8">
-        <div class="flex flex-wrap gap-x-6 gap-y-3"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-            <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="footer" class="mt-8">
+        <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
       </div>
@@ -158,8 +158,8 @@ exports[`PageCTA > renders with orientation horizontal links correctly 1`] = `
 `;
 
 exports[`PageCTA > renders with orientation horizontal reverse correctly 1`] = `
-"<div data-orientation="horizontal" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center">
+"<div data-orientation="horizontal" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center" data-slot="container">
     <!--v-if-->
     <div class="hidden lg:block"></div>
   </div>
@@ -167,17 +167,17 @@ exports[`PageCTA > renders with orientation horizontal reverse correctly 1`] = `
 `;
 
 exports[`PageCTA > renders with reverse correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16"></div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container"></div>
 </div>"
 `;
 
 exports[`PageCTA > renders with title correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
-        <h2 class="text-3xl sm:text-4xl text-pretty tracking-tight font-bold text-highlighted text-center">Title</h2>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
+        <h2 data-slot="title" class="text-3xl sm:text-4xl text-pretty tracking-tight font-bold text-highlighted text-center">Title</h2>
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -189,11 +189,11 @@ exports[`PageCTA > renders with title correctly 1`] = `
 `;
 
 exports[`PageCTA > renders with title slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
-        <h2 class="text-3xl sm:text-4xl text-pretty tracking-tight font-bold text-highlighted text-center">Title slot</h2>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
+        <h2 data-slot="title" class="text-3xl sm:text-4xl text-pretty tracking-tight font-bold text-highlighted text-center">Title slot</h2>
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -205,42 +205,42 @@ exports[`PageCTA > renders with title slot correctly 1`] = `
 `;
 
 exports[`PageCTA > renders with top slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">Top slot<div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16"></div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">Top slot<div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container"></div>
 </div>"
 `;
 
 exports[`PageCTA > renders with ui correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16 max-w-5xl"></div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16 max-w-5xl" data-slot="container"></div>
 </div>"
 `;
 
 exports[`PageCTA > renders with variant naked correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16"></div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container"></div>
 </div>"
 `;
 
 exports[`PageCTA > renders with variant outline correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16"></div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container"></div>
 </div>"
 `;
 
 exports[`PageCTA > renders with variant soft correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-elevated/50">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16"></div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-elevated/50">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container"></div>
 </div>"
 `;
 
 exports[`PageCTA > renders with variant solid correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-inverted text-inverted">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16"></div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-inverted text-inverted">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container"></div>
 </div>"
 `;
 
 exports[`PageCTA > renders with variant subtle correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-elevated/50 ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16"></div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-elevated/50 ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container"></div>
 </div>"
 `;
diff --git a/test/components/__snapshots__/PageCTA.spec.ts.snap b/test/components/__snapshots__/PageCTA.spec.ts.snap
index bc6aa5c5ab..83492e921d 100644
--- a/test/components/__snapshots__/PageCTA.spec.ts.snap
+++ b/test/components/__snapshots__/PageCTA.spec.ts.snap
@@ -1,17 +1,17 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PageCTA > renders with as correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16"></div>
+"<section data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container"></div>
 </section>"
 `;
 
 exports[`PageCTA > renders with body slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16">
-    <div class="">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
-      <div class="mt-8">Body slot</div>
+      <div data-slot="body" class="mt-8">Body slot</div>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -20,32 +20,32 @@ exports[`PageCTA > renders with body slot correctly 1`] = `
 `;
 
 exports[`PageCTA > renders with bottom slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16"></div>Bottom slot
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container"></div>Bottom slot
 </div>"
 `;
 
 exports[`PageCTA > renders with class correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate overflow-hidden bg-default ring ring-default rounded-none">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16"></div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate overflow-hidden bg-default ring ring-default rounded-none">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container"></div>
 </div>"
 `;
 
 exports[`PageCTA > renders with default slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container">
     <!--v-if-->Default slot
   </div>
 </div>"
 `;
 
 exports[`PageCTA > renders with description correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
         <!--v-if-->
-        <div class="text-base sm:text-lg text-center text-balance text-muted">Description</div>
+        <div data-slot="description" class="text-base sm:text-lg text-center text-balance text-muted">Description</div>
       </div>
       <!--v-if-->
       <!--v-if-->
@@ -56,12 +56,12 @@ exports[`PageCTA > renders with description correctly 1`] = `
 `;
 
 exports[`PageCTA > renders with description slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
         <!--v-if-->
-        <div class="text-base sm:text-lg text-center text-balance text-muted">Description slot</div>
+        <div data-slot="description" class="text-base sm:text-lg text-center text-balance text-muted">Description slot</div>
       </div>
       <!--v-if-->
       <!--v-if-->
@@ -72,12 +72,12 @@ exports[`PageCTA > renders with description slot correctly 1`] = `
 `;
 
 exports[`PageCTA > renders with footer slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16">
-    <div class="">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-      <div class="mt-8">Footer slot</div>
+      <div data-slot="footer" class="mt-8">Footer slot</div>
     </div>
     <!--v-if-->
   </div>
@@ -85,10 +85,10 @@ exports[`PageCTA > renders with footer slot correctly 1`] = `
 `;
 
 exports[`PageCTA > renders with header slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">Header slot</div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">Header slot</div>
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -98,14 +98,14 @@ exports[`PageCTA > renders with header slot correctly 1`] = `
 `;
 
 exports[`PageCTA > renders with links correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16">
-    <div class="">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-      <div class="mt-8">
-        <div class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-            <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="footer" class="mt-8">
+        <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
       </div>
@@ -116,13 +116,13 @@ exports[`PageCTA > renders with links correctly 1`] = `
 `;
 
 exports[`PageCTA > renders with links slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16">
-    <div class="">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-      <div class="mt-8">
-        <div class="flex flex-wrap gap-x-6 gap-y-3 justify-center">Links slot</div>
+      <div data-slot="footer" class="mt-8">
+        <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center">Links slot</div>
       </div>
     </div>
     <!--v-if-->
@@ -131,8 +131,8 @@ exports[`PageCTA > renders with links slot correctly 1`] = `
 `;
 
 exports[`PageCTA > renders with orientation horizontal correctly 1`] = `
-"<div data-orientation="horizontal" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center">
+"<div data-orientation="horizontal" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center" data-slot="container">
     <!--v-if-->
     <div class="hidden lg:block"></div>
   </div>
@@ -140,14 +140,14 @@ exports[`PageCTA > renders with orientation horizontal correctly 1`] = `
 `;
 
 exports[`PageCTA > renders with orientation horizontal links correctly 1`] = `
-"<div data-orientation="horizontal" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center">
-    <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center" data-slot="container">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-      <div class="mt-8">
-        <div class="flex flex-wrap gap-x-6 gap-y-3"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-            <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="footer" class="mt-8">
+        <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
       </div>
@@ -158,8 +158,8 @@ exports[`PageCTA > renders with orientation horizontal links correctly 1`] = `
 `;
 
 exports[`PageCTA > renders with orientation horizontal reverse correctly 1`] = `
-"<div data-orientation="horizontal" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center">
+"<div data-orientation="horizontal" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center" data-slot="container">
     <!--v-if-->
     <div class="hidden lg:block"></div>
   </div>
@@ -167,17 +167,17 @@ exports[`PageCTA > renders with orientation horizontal reverse correctly 1`] = `
 `;
 
 exports[`PageCTA > renders with reverse correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16"></div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container"></div>
 </div>"
 `;
 
 exports[`PageCTA > renders with title correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
-        <h2 class="text-3xl sm:text-4xl text-pretty tracking-tight font-bold text-highlighted text-center">Title</h2>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
+        <h2 data-slot="title" class="text-3xl sm:text-4xl text-pretty tracking-tight font-bold text-highlighted text-center">Title</h2>
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -189,11 +189,11 @@ exports[`PageCTA > renders with title correctly 1`] = `
 `;
 
 exports[`PageCTA > renders with title slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
-        <h2 class="text-3xl sm:text-4xl text-pretty tracking-tight font-bold text-highlighted text-center">Title slot</h2>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
+        <h2 data-slot="title" class="text-3xl sm:text-4xl text-pretty tracking-tight font-bold text-highlighted text-center">Title slot</h2>
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -205,42 +205,42 @@ exports[`PageCTA > renders with title slot correctly 1`] = `
 `;
 
 exports[`PageCTA > renders with top slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">Top slot<div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16"></div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">Top slot<div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container"></div>
 </div>"
 `;
 
 exports[`PageCTA > renders with ui correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16 max-w-5xl"></div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16 max-w-5xl" data-slot="container"></div>
 </div>"
 `;
 
 exports[`PageCTA > renders with variant naked correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16"></div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container"></div>
 </div>"
 `;
 
 exports[`PageCTA > renders with variant outline correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16"></div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-default ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container"></div>
 </div>"
 `;
 
 exports[`PageCTA > renders with variant soft correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-elevated/50">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16"></div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-elevated/50">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container"></div>
 </div>"
 `;
 
 exports[`PageCTA > renders with variant solid correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-inverted text-inverted">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16"></div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-inverted text-inverted">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container"></div>
 </div>"
 `;
 
 exports[`PageCTA > renders with variant subtle correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate rounded-xl overflow-hidden bg-elevated/50 ring ring-default">
-  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16"></div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate rounded-xl overflow-hidden bg-elevated/50 ring ring-default">
+  <div class="w-full max-w-(--ui-container) mx-auto flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16" data-slot="container"></div>
 </div>"
 `;
diff --git a/test/components/__snapshots__/PageCard-vue.spec.ts.snap b/test/components/__snapshots__/PageCard-vue.spec.ts.snap
index dd730f7cd4..11bdfeb9a8 100644
--- a/test/components/__snapshots__/PageCard-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PageCard-vue.spec.ts.snap
@@ -1,9 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PageCard > renders with as correctly 1`] = `
-"<section data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<section data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -11,13 +11,13 @@ exports[`PageCard > renders with as correctly 1`] = `
 `;
 
 exports[`PageCard > renders with body slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">Body slot</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">Body slot</div>
       <!--v-if-->
     </div>
   </div>
@@ -26,15 +26,15 @@ exports[`PageCard > renders with body slot correctly 1`] = `
 `;
 
 exports[`PageCard > renders with class correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex bg-default ring ring-default rounded-xl">
+"<div data-orientation="vertical" data-slot="root" class="relative flex bg-default ring ring-default rounded-xl">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -44,15 +44,15 @@ exports[`PageCard > renders with class correctly 1`] = `
 `;
 
 exports[`PageCard > renders with default slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>Default slot
@@ -62,15 +62,15 @@ exports[`PageCard > renders with default slot correctly 1`] = `
 `;
 
 exports[`PageCard > renders with description correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
       <!--v-if-->
-      <div class="flex-1">
+      <div data-slot="body" class="flex-1">
         <!--v-if-->
-        <div class="text-[15px] text-pretty text-muted">Description</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -80,15 +80,15 @@ exports[`PageCard > renders with description correctly 1`] = `
 `;
 
 exports[`PageCard > renders with description slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description slot</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description slot</div>
       </div>
       <!--v-if-->
     </div>
@@ -98,17 +98,17 @@ exports[`PageCard > renders with description slot correctly 1`] = `
 `;
 
 exports[`PageCard > renders with footer slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
-      <div class="pt-4 mt-auto">Footer slot</div>
+      <div data-slot="footer" class="pt-4 mt-auto">Footer slot</div>
     </div>
   </div>
   <!--v-if-->
@@ -116,15 +116,15 @@ exports[`PageCard > renders with footer slot correctly 1`] = `
 `;
 
 exports[`PageCard > renders with header slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
-      <div class="mb-4">Header slot</div>
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
+      <div data-slot="header" class="mb-4">Header slot</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -134,15 +134,15 @@ exports[`PageCard > renders with header slot correctly 1`] = `
 `;
 
 exports[`PageCard > renders with highlight color error correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-error">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring-2 ring-error">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -152,15 +152,15 @@ exports[`PageCard > renders with highlight color error correctly 1`] = `
 `;
 
 exports[`PageCard > renders with highlight color info correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-info">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring-2 ring-info">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -170,15 +170,15 @@ exports[`PageCard > renders with highlight color info correctly 1`] = `
 `;
 
 exports[`PageCard > renders with highlight color neutral correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring-2 ring-inverted">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -188,15 +188,15 @@ exports[`PageCard > renders with highlight color neutral correctly 1`] = `
 `;
 
 exports[`PageCard > renders with highlight color neutral correctly 2`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring-2 ring-inverted">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -206,15 +206,15 @@ exports[`PageCard > renders with highlight color neutral correctly 2`] = `
 `;
 
 exports[`PageCard > renders with highlight color primary correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring-2 ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -224,15 +224,15 @@ exports[`PageCard > renders with highlight color primary correctly 1`] = `
 `;
 
 exports[`PageCard > renders with highlight color secondary correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-secondary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring-2 ring-secondary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -242,15 +242,15 @@ exports[`PageCard > renders with highlight color secondary correctly 1`] = `
 `;
 
 exports[`PageCard > renders with highlight color success correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-success">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring-2 ring-success">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -260,15 +260,15 @@ exports[`PageCard > renders with highlight color success correctly 1`] = `
 `;
 
 exports[`PageCard > renders with highlight color warning correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-warning">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring-2 ring-warning">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -278,15 +278,15 @@ exports[`PageCard > renders with highlight color warning correctly 1`] = `
 `;
 
 exports[`PageCard > renders with highlight correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring-2 ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -296,12 +296,12 @@ exports[`PageCard > renders with highlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with icon correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -311,15 +311,15 @@ exports[`PageCard > renders with icon correctly 1`] = `
 `;
 
 exports[`PageCard > renders with leading slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5">Leading slot</div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5">Leading slot</div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -329,15 +329,15 @@ exports[`PageCard > renders with leading slot correctly 1`] = `
 `;
 
 exports[`PageCard > renders with orientation horizontal correctly 1`] = `
-"<div data-orientation="horizontal" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="horizontal" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6 lg:grid-cols-2 lg:items-center">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6 lg:grid-cols-2 lg:items-center">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -347,15 +347,15 @@ exports[`PageCard > renders with orientation horizontal correctly 1`] = `
 `;
 
 exports[`PageCard > renders with orientation horizontal reverse correctly 1`] = `
-"<div data-orientation="horizontal" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="horizontal" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6 lg:grid-cols-2 lg:items-center">
-    <div class="flex flex-col flex-1 items-start lg:order-last">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6 lg:grid-cols-2 lg:items-center">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start lg:order-last">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -365,15 +365,15 @@ exports[`PageCard > renders with orientation horizontal reverse correctly 1`] =
 `;
 
 exports[`PageCard > renders with orientation vertical correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -383,15 +383,15 @@ exports[`PageCard > renders with orientation vertical correctly 1`] = `
 `;
 
 exports[`PageCard > renders with orientation vertical reverse correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start lg:order-last">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start lg:order-last">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -401,15 +401,15 @@ exports[`PageCard > renders with orientation vertical reverse correctly 1`] = `
 `;
 
 exports[`PageCard > renders with spotlight color error correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
-  <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
+  <div data-slot="spotlight" class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -419,15 +419,15 @@ exports[`PageCard > renders with spotlight color error correctly 1`] = `
 `;
 
 exports[`PageCard > renders with spotlight color info correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
-  <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
+  <div data-slot="spotlight" class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -437,15 +437,15 @@ exports[`PageCard > renders with spotlight color info correctly 1`] = `
 `;
 
 exports[`PageCard > renders with spotlight color neutral correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
-  <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
+  <div data-slot="spotlight" class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -455,15 +455,15 @@ exports[`PageCard > renders with spotlight color neutral correctly 1`] = `
 `;
 
 exports[`PageCard > renders with spotlight color neutral correctly 2`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
-  <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
+  <div data-slot="spotlight" class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -473,15 +473,15 @@ exports[`PageCard > renders with spotlight color neutral correctly 2`] = `
 `;
 
 exports[`PageCard > renders with spotlight color primary correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
-  <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
+  <div data-slot="spotlight" class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -491,15 +491,15 @@ exports[`PageCard > renders with spotlight color primary correctly 1`] = `
 `;
 
 exports[`PageCard > renders with spotlight color secondary correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
-  <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
+  <div data-slot="spotlight" class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -509,15 +509,15 @@ exports[`PageCard > renders with spotlight color secondary correctly 1`] = `
 `;
 
 exports[`PageCard > renders with spotlight color success correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
-  <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
+  <div data-slot="spotlight" class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -527,15 +527,15 @@ exports[`PageCard > renders with spotlight color success correctly 1`] = `
 `;
 
 exports[`PageCard > renders with spotlight color warning correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
-  <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
+  <div data-slot="spotlight" class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -545,15 +545,15 @@ exports[`PageCard > renders with spotlight color warning correctly 1`] = `
 `;
 
 exports[`PageCard > renders with spotlight correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
-  <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
+  <div data-slot="spotlight" class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -563,14 +563,14 @@ exports[`PageCard > renders with spotlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with title correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
       <!--v-if-->
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -581,15 +581,15 @@ exports[`PageCard > renders with title correctly 1`] = `
 `;
 
 exports[`PageCard > renders with title slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title slot</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title slot</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -599,24 +599,24 @@ exports[`PageCard > renders with title slot correctly 1`] = `
 `;
 
 exports[`PageCard > renders with to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default transition hover:bg-elevated/50 has-focus-visible:ring-2 has-focus-visible:ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default transition hover:bg-elevated/50 has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
     <!--v-if-->
   </div><a href="https://github.com/benjamincanac" target="_blank" aria-label="Card link" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"
 `;
 
 exports[`PageCard > renders with ui correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty text-highlighted font-bold">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty text-highlighted font-bold">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -626,15 +626,15 @@ exports[`PageCard > renders with ui correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant ghost correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -644,15 +644,15 @@ exports[`PageCard > renders with variant ghost correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant ghost highlight correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg ring-2 ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg ring-2 ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -662,15 +662,15 @@ exports[`PageCard > renders with variant ghost highlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant ghost to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg transition hover:bg-elevated/50 has-focus-visible:ring-2 has-focus-visible:ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg transition hover:bg-elevated/50 has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -679,15 +679,15 @@ exports[`PageCard > renders with variant ghost to correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant naked correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-0 sm:p-0">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-0 sm:p-0">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -697,15 +697,15 @@ exports[`PageCard > renders with variant naked correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant naked highlight correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg ring-2 ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg ring-2 ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-0 sm:p-0">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-0 sm:p-0">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -715,15 +715,15 @@ exports[`PageCard > renders with variant naked highlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant naked to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg transition has-focus-visible:ring-2 has-focus-visible:ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg transition has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-0 sm:p-0">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-0 sm:p-0">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -732,15 +732,15 @@ exports[`PageCard > renders with variant naked to correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant outline correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -750,15 +750,15 @@ exports[`PageCard > renders with variant outline correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant outline highlight correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring-2 ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -768,15 +768,15 @@ exports[`PageCard > renders with variant outline highlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant outline to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default transition hover:bg-elevated/50 has-focus-visible:ring-2 has-focus-visible:ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default transition hover:bg-elevated/50 has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -785,15 +785,15 @@ exports[`PageCard > renders with variant outline to correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant soft correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-elevated/50">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-toned mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-toned mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -803,15 +803,15 @@ exports[`PageCard > renders with variant soft correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant soft highlight correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 ring-2 ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-elevated/50 ring-2 ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-toned mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-toned mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -821,15 +821,15 @@ exports[`PageCard > renders with variant soft highlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant soft to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 transition hover:bg-elevated has-focus-visible:ring-2 has-focus-visible:ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-elevated/50 transition hover:bg-elevated has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-toned mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-toned mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -838,15 +838,15 @@ exports[`PageCard > renders with variant soft to correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant solid correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-inverted text-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-inverted text-inverted">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-inverted">Title</div>
-        <div class="text-[15px] text-pretty text-dimmed mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-inverted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-dimmed mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -856,15 +856,15 @@ exports[`PageCard > renders with variant solid correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant solid highlight correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-inverted text-inverted ring-2 ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-inverted text-inverted ring-2 ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-inverted">Title</div>
-        <div class="text-[15px] text-pretty text-dimmed mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-inverted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-dimmed mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -874,15 +874,15 @@ exports[`PageCard > renders with variant solid highlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant solid to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-inverted text-inverted transition hover:bg-inverted/90 has-focus-visible:ring-2 has-focus-visible:ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-inverted text-inverted transition hover:bg-inverted/90 has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-inverted">Title</div>
-        <div class="text-[15px] text-pretty text-dimmed mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-inverted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-dimmed mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -891,15 +891,15 @@ exports[`PageCard > renders with variant solid to correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant subtle correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-elevated/50 ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-toned mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-toned mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -909,15 +909,15 @@ exports[`PageCard > renders with variant subtle correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant subtle highlight correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 ring-2 ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-elevated/50 ring-2 ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-toned mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-toned mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -927,15 +927,15 @@ exports[`PageCard > renders with variant subtle highlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant subtle to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 ring ring-default transition hover:bg-elevated hover:ring-accented has-focus-visible:ring-2 has-focus-visible:ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-elevated/50 ring ring-default transition hover:bg-elevated hover:ring-accented has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-toned mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-toned mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
diff --git a/test/components/__snapshots__/PageCard.spec.ts.snap b/test/components/__snapshots__/PageCard.spec.ts.snap
index 294af1ae60..2805354cb1 100644
--- a/test/components/__snapshots__/PageCard.spec.ts.snap
+++ b/test/components/__snapshots__/PageCard.spec.ts.snap
@@ -1,9 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PageCard > renders with as correctly 1`] = `
-"<section data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<section data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -11,13 +11,13 @@ exports[`PageCard > renders with as correctly 1`] = `
 `;
 
 exports[`PageCard > renders with body slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">Body slot</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">Body slot</div>
       <!--v-if-->
     </div>
   </div>
@@ -26,15 +26,15 @@ exports[`PageCard > renders with body slot correctly 1`] = `
 `;
 
 exports[`PageCard > renders with class correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex bg-default ring ring-default rounded-xl">
+"<div data-orientation="vertical" data-slot="root" class="relative flex bg-default ring ring-default rounded-xl">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -44,15 +44,15 @@ exports[`PageCard > renders with class correctly 1`] = `
 `;
 
 exports[`PageCard > renders with default slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>Default slot
@@ -62,15 +62,15 @@ exports[`PageCard > renders with default slot correctly 1`] = `
 `;
 
 exports[`PageCard > renders with description correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
       <!--v-if-->
-      <div class="flex-1">
+      <div data-slot="body" class="flex-1">
         <!--v-if-->
-        <div class="text-[15px] text-pretty text-muted">Description</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -80,15 +80,15 @@ exports[`PageCard > renders with description correctly 1`] = `
 `;
 
 exports[`PageCard > renders with description slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description slot</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description slot</div>
       </div>
       <!--v-if-->
     </div>
@@ -98,17 +98,17 @@ exports[`PageCard > renders with description slot correctly 1`] = `
 `;
 
 exports[`PageCard > renders with footer slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
-      <div class="pt-4 mt-auto">Footer slot</div>
+      <div data-slot="footer" class="pt-4 mt-auto">Footer slot</div>
     </div>
   </div>
   <!--v-if-->
@@ -116,15 +116,15 @@ exports[`PageCard > renders with footer slot correctly 1`] = `
 `;
 
 exports[`PageCard > renders with header slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
-      <div class="mb-4">Header slot</div>
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
+      <div data-slot="header" class="mb-4">Header slot</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -134,15 +134,15 @@ exports[`PageCard > renders with header slot correctly 1`] = `
 `;
 
 exports[`PageCard > renders with highlight color error correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-error">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring-2 ring-error">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -152,15 +152,15 @@ exports[`PageCard > renders with highlight color error correctly 1`] = `
 `;
 
 exports[`PageCard > renders with highlight color info correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-info">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring-2 ring-info">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -170,15 +170,15 @@ exports[`PageCard > renders with highlight color info correctly 1`] = `
 `;
 
 exports[`PageCard > renders with highlight color neutral correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring-2 ring-inverted">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -188,15 +188,15 @@ exports[`PageCard > renders with highlight color neutral correctly 1`] = `
 `;
 
 exports[`PageCard > renders with highlight color neutral correctly 2`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring-2 ring-inverted">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -206,15 +206,15 @@ exports[`PageCard > renders with highlight color neutral correctly 2`] = `
 `;
 
 exports[`PageCard > renders with highlight color primary correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring-2 ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -224,15 +224,15 @@ exports[`PageCard > renders with highlight color primary correctly 1`] = `
 `;
 
 exports[`PageCard > renders with highlight color secondary correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-secondary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring-2 ring-secondary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -242,15 +242,15 @@ exports[`PageCard > renders with highlight color secondary correctly 1`] = `
 `;
 
 exports[`PageCard > renders with highlight color success correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-success">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring-2 ring-success">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -260,15 +260,15 @@ exports[`PageCard > renders with highlight color success correctly 1`] = `
 `;
 
 exports[`PageCard > renders with highlight color warning correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-warning">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring-2 ring-warning">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -278,15 +278,15 @@ exports[`PageCard > renders with highlight color warning correctly 1`] = `
 `;
 
 exports[`PageCard > renders with highlight correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring-2 ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -296,12 +296,12 @@ exports[`PageCard > renders with highlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with icon correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -311,15 +311,15 @@ exports[`PageCard > renders with icon correctly 1`] = `
 `;
 
 exports[`PageCard > renders with leading slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5">Leading slot</div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5">Leading slot</div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -329,15 +329,15 @@ exports[`PageCard > renders with leading slot correctly 1`] = `
 `;
 
 exports[`PageCard > renders with orientation horizontal correctly 1`] = `
-"<div data-orientation="horizontal" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="horizontal" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6 lg:grid-cols-2 lg:items-center">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6 lg:grid-cols-2 lg:items-center">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -347,15 +347,15 @@ exports[`PageCard > renders with orientation horizontal correctly 1`] = `
 `;
 
 exports[`PageCard > renders with orientation horizontal reverse correctly 1`] = `
-"<div data-orientation="horizontal" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="horizontal" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6 lg:grid-cols-2 lg:items-center">
-    <div class="flex flex-col flex-1 items-start lg:order-last">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6 lg:grid-cols-2 lg:items-center">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start lg:order-last">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -365,15 +365,15 @@ exports[`PageCard > renders with orientation horizontal reverse correctly 1`] =
 `;
 
 exports[`PageCard > renders with orientation vertical correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -383,15 +383,15 @@ exports[`PageCard > renders with orientation vertical correctly 1`] = `
 `;
 
 exports[`PageCard > renders with orientation vertical reverse correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start lg:order-last">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start lg:order-last">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -401,15 +401,15 @@ exports[`PageCard > renders with orientation vertical reverse correctly 1`] = `
 `;
 
 exports[`PageCard > renders with spotlight color error correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
-  <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
+  <div data-slot="spotlight" class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -419,15 +419,15 @@ exports[`PageCard > renders with spotlight color error correctly 1`] = `
 `;
 
 exports[`PageCard > renders with spotlight color info correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
-  <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
+  <div data-slot="spotlight" class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -437,15 +437,15 @@ exports[`PageCard > renders with spotlight color info correctly 1`] = `
 `;
 
 exports[`PageCard > renders with spotlight color neutral correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
-  <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
+  <div data-slot="spotlight" class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -455,15 +455,15 @@ exports[`PageCard > renders with spotlight color neutral correctly 1`] = `
 `;
 
 exports[`PageCard > renders with spotlight color neutral correctly 2`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
-  <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
+  <div data-slot="spotlight" class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -473,15 +473,15 @@ exports[`PageCard > renders with spotlight color neutral correctly 2`] = `
 `;
 
 exports[`PageCard > renders with spotlight color primary correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
-  <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
+  <div data-slot="spotlight" class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -491,15 +491,15 @@ exports[`PageCard > renders with spotlight color primary correctly 1`] = `
 `;
 
 exports[`PageCard > renders with spotlight color secondary correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
-  <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
+  <div data-slot="spotlight" class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -509,15 +509,15 @@ exports[`PageCard > renders with spotlight color secondary correctly 1`] = `
 `;
 
 exports[`PageCard > renders with spotlight color success correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
-  <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
+  <div data-slot="spotlight" class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -527,15 +527,15 @@ exports[`PageCard > renders with spotlight color success correctly 1`] = `
 `;
 
 exports[`PageCard > renders with spotlight color warning correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
-  <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
+  <div data-slot="spotlight" class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -545,15 +545,15 @@ exports[`PageCard > renders with spotlight color warning correctly 1`] = `
 `;
 
 exports[`PageCard > renders with spotlight correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
-  <div class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
+  <div data-slot="spotlight" class="absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90"></div>
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -563,14 +563,14 @@ exports[`PageCard > renders with spotlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with title correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
       <!--v-if-->
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -581,15 +581,15 @@ exports[`PageCard > renders with title correctly 1`] = `
 `;
 
 exports[`PageCard > renders with title slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title slot</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title slot</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -599,24 +599,24 @@ exports[`PageCard > renders with title slot correctly 1`] = `
 `;
 
 exports[`PageCard > renders with to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default transition hover:bg-elevated/50 has-focus-visible:ring-2 has-focus-visible:ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default transition hover:bg-elevated/50 has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
     <!--v-if-->
   </div><a href="https://github.com/benjamincanac" rel="noopener noreferrer" aria-label="Card link" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
 </div>"
 `;
 
 exports[`PageCard > renders with ui correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty text-highlighted font-bold">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty text-highlighted font-bold">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -626,15 +626,15 @@ exports[`PageCard > renders with ui correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant ghost correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -644,15 +644,15 @@ exports[`PageCard > renders with variant ghost correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant ghost highlight correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg ring-2 ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg ring-2 ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -662,15 +662,15 @@ exports[`PageCard > renders with variant ghost highlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant ghost to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg transition hover:bg-elevated/50 has-focus-visible:ring-2 has-focus-visible:ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg transition hover:bg-elevated/50 has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -679,15 +679,15 @@ exports[`PageCard > renders with variant ghost to correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant naked correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-0 sm:p-0">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-0 sm:p-0">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -697,15 +697,15 @@ exports[`PageCard > renders with variant naked correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant naked highlight correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg ring-2 ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg ring-2 ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-0 sm:p-0">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-0 sm:p-0">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -715,15 +715,15 @@ exports[`PageCard > renders with variant naked highlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant naked to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg transition has-focus-visible:ring-2 has-focus-visible:ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg transition has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-0 sm:p-0">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-0 sm:p-0">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -732,15 +732,15 @@ exports[`PageCard > renders with variant naked to correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant outline correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -750,15 +750,15 @@ exports[`PageCard > renders with variant outline correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant outline highlight correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring-2 ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring-2 ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -768,15 +768,15 @@ exports[`PageCard > renders with variant outline highlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant outline to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-default ring ring-default transition hover:bg-elevated/50 has-focus-visible:ring-2 has-focus-visible:ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default transition hover:bg-elevated/50 has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -785,15 +785,15 @@ exports[`PageCard > renders with variant outline to correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant soft correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-elevated/50">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-toned mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-toned mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -803,15 +803,15 @@ exports[`PageCard > renders with variant soft correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant soft highlight correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 ring-2 ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-elevated/50 ring-2 ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-toned mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-toned mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -821,15 +821,15 @@ exports[`PageCard > renders with variant soft highlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant soft to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 transition hover:bg-elevated has-focus-visible:ring-2 has-focus-visible:ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-elevated/50 transition hover:bg-elevated has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-toned mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-toned mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -838,15 +838,15 @@ exports[`PageCard > renders with variant soft to correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant solid correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-inverted text-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-inverted text-inverted">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-inverted">Title</div>
-        <div class="text-[15px] text-pretty text-dimmed mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-inverted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-dimmed mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -856,15 +856,15 @@ exports[`PageCard > renders with variant solid correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant solid highlight correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-inverted text-inverted ring-2 ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-inverted text-inverted ring-2 ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-inverted">Title</div>
-        <div class="text-[15px] text-pretty text-dimmed mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-inverted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-dimmed mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -874,15 +874,15 @@ exports[`PageCard > renders with variant solid highlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant solid to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-inverted text-inverted transition hover:bg-inverted/90 has-focus-visible:ring-2 has-focus-visible:ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-inverted text-inverted transition hover:bg-inverted/90 has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-inverted">Title</div>
-        <div class="text-[15px] text-pretty text-dimmed mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-inverted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-dimmed mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -891,15 +891,15 @@ exports[`PageCard > renders with variant solid to correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant subtle correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-elevated/50 ring ring-default">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-toned mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-toned mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -909,15 +909,15 @@ exports[`PageCard > renders with variant subtle correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant subtle highlight correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 ring-2 ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-elevated/50 ring-2 ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-toned mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-toned mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
@@ -927,15 +927,15 @@ exports[`PageCard > renders with variant subtle highlight correctly 1`] = `
 `;
 
 exports[`PageCard > renders with variant subtle to correctly 1`] = `
-"<div data-orientation="vertical" class="relative flex rounded-lg bg-elevated/50 ring ring-default transition hover:bg-elevated hover:ring-accented has-focus-visible:ring-2 has-focus-visible:ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-elevated/50 ring ring-default transition hover:bg-elevated hover:ring-accented has-focus-visible:ring-2 has-focus-visible:ring-primary">
   <!--v-if-->
-  <div class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
-    <div class="flex flex-col flex-1 items-start">
+  <div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6">
+    <div data-slot="wrapper" class="flex flex-col flex-1 items-start">
       <!--v-if-->
-      <div class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-      <div class="flex-1">
-        <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-        <div class="text-[15px] text-pretty text-toned mt-1">Description</div>
+      <div data-slot="leading" class="inline-flex items-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+      <div data-slot="body" class="flex-1">
+        <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+        <div data-slot="description" class="text-[15px] text-pretty text-toned mt-1">Description</div>
       </div>
       <!--v-if-->
     </div>
diff --git a/test/components/__snapshots__/PageFeature-vue.spec.ts.snap b/test/components/__snapshots__/PageFeature-vue.spec.ts.snap
index e6c05edea3..d21f2b9a41 100644
--- a/test/components/__snapshots__/PageFeature-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PageFeature-vue.spec.ts.snap
@@ -1,9 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PageFeature > renders with as correctly 1`] = `
-"<section data-orientation="horizontal" class="relative flex items-start gap-2.5">
+"<section data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
   <!--v-if-->
-  <div class="">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
@@ -12,51 +12,51 @@ exports[`PageFeature > renders with as correctly 1`] = `
 `;
 
 exports[`PageFeature > renders with class correctly 1`] = `
-"<div data-orientation="horizontal" class="relative flex items-start gap-2.5 rounded-xl">
-  <div class="inline-flex items-center justify-center p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5 rounded-xl">
+  <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-    <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+    <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+    <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
   </div>
 </div>"
 `;
 
 exports[`PageFeature > renders with default slot correctly 1`] = `
-"<div data-orientation="horizontal" class="relative flex items-start gap-2.5">
-  <div class="inline-flex items-center justify-center p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
+  <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+  <div data-slot="wrapper" class="">
     <!--v-if-->Default slot
   </div>
 </div>"
 `;
 
 exports[`PageFeature > renders with description correctly 1`] = `
-"<div data-orientation="horizontal" class="relative flex items-start gap-2.5">
+"<div data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
   <!--v-if-->
-  <div class="">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
-    <div class="text-[15px] text-pretty text-muted">Description</div>
+    <div data-slot="description" class="text-[15px] text-pretty text-muted">Description</div>
   </div>
 </div>"
 `;
 
 exports[`PageFeature > renders with description slot correctly 1`] = `
-"<div data-orientation="horizontal" class="relative flex items-start gap-2.5">
-  <div class="inline-flex items-center justify-center p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
+  <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-    <div class="text-[15px] text-pretty text-muted mt-1">Description slot</div>
+    <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+    <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description slot</div>
   </div>
 </div>"
 `;
 
 exports[`PageFeature > renders with icon correctly 1`] = `
-"<div data-orientation="horizontal" class="relative flex items-start gap-2.5">
-  <div class="inline-flex items-center justify-center p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
+  <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
@@ -65,64 +65,64 @@ exports[`PageFeature > renders with icon correctly 1`] = `
 `;
 
 exports[`PageFeature > renders with leading slot correctly 1`] = `
-"<div data-orientation="horizontal" class="relative flex items-start gap-2.5">
-  <div class="inline-flex items-center justify-center p-0.5">Leading slot</div>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
+  <div data-slot="leading" class="inline-flex items-center justify-center p-0.5">Leading slot</div>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-    <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+    <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+    <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
   </div>
 </div>"
 `;
 
 exports[`PageFeature > renders with orientation horizontal correctly 1`] = `
-"<div data-orientation="horizontal" class="relative flex items-start gap-2.5">
-  <div class="inline-flex items-center justify-center p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
+  <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-    <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+    <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+    <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
   </div>
 </div>"
 `;
 
 exports[`PageFeature > renders with orientation vertical correctly 1`] = `
-"<div data-orientation="vertical" class="relative">
-  <div class="inline-flex items-center justify-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-  <div class="">
+"<div data-orientation="vertical" data-slot="root" class="relative">
+  <div data-slot="leading" class="inline-flex items-center justify-center mb-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-    <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+    <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+    <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
   </div>
 </div>"
 `;
 
 exports[`PageFeature > renders with title correctly 1`] = `
-"<div data-orientation="horizontal" class="relative flex items-start gap-2.5">
+"<div data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
   <!--v-if-->
-  <div class="">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
+    <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`PageFeature > renders with title slot correctly 1`] = `
-"<div data-orientation="horizontal" class="relative flex items-start gap-2.5">
-  <div class="inline-flex items-center justify-center p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
+  <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <div class="text-base text-pretty font-semibold text-highlighted">Title slot</div>
-    <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+    <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title slot</div>
+    <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
   </div>
 </div>"
 `;
 
 exports[`PageFeature > renders with to correctly 1`] = `
-"<div data-orientation="horizontal" class="relative flex items-start gap-2.5">
+"<div data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
   <!--v-if-->
-  <div class=""><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Feature link" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+  <div data-slot="wrapper" class=""><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Feature link" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -130,12 +130,12 @@ exports[`PageFeature > renders with to correctly 1`] = `
 `;
 
 exports[`PageFeature > renders with ui correctly 1`] = `
-"<div data-orientation="horizontal" class="relative flex items-start gap-2.5">
-  <div class="inline-flex items-center justify-center p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
+  <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <div class="text-base text-pretty text-highlighted font-bold">Title</div>
-    <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+    <div data-slot="title" class="text-base text-pretty text-highlighted font-bold">Title</div>
+    <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
   </div>
 </div>"
 `;
diff --git a/test/components/__snapshots__/PageFeature.spec.ts.snap b/test/components/__snapshots__/PageFeature.spec.ts.snap
index ea79df412d..f7d6743b31 100644
--- a/test/components/__snapshots__/PageFeature.spec.ts.snap
+++ b/test/components/__snapshots__/PageFeature.spec.ts.snap
@@ -1,9 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PageFeature > renders with as correctly 1`] = `
-"<section data-orientation="horizontal" class="relative flex items-start gap-2.5">
+"<section data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
   <!--v-if-->
-  <div class="">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
@@ -12,51 +12,51 @@ exports[`PageFeature > renders with as correctly 1`] = `
 `;
 
 exports[`PageFeature > renders with class correctly 1`] = `
-"<div data-orientation="horizontal" class="relative flex items-start gap-2.5 rounded-xl">
-  <div class="inline-flex items-center justify-center p-0.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5 rounded-xl">
+  <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-    <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+    <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+    <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
   </div>
 </div>"
 `;
 
 exports[`PageFeature > renders with default slot correctly 1`] = `
-"<div data-orientation="horizontal" class="relative flex items-start gap-2.5">
-  <div class="inline-flex items-center justify-center p-0.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
+  <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+  <div data-slot="wrapper" class="">
     <!--v-if-->Default slot
   </div>
 </div>"
 `;
 
 exports[`PageFeature > renders with description correctly 1`] = `
-"<div data-orientation="horizontal" class="relative flex items-start gap-2.5">
+"<div data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
   <!--v-if-->
-  <div class="">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
-    <div class="text-[15px] text-pretty text-muted">Description</div>
+    <div data-slot="description" class="text-[15px] text-pretty text-muted">Description</div>
   </div>
 </div>"
 `;
 
 exports[`PageFeature > renders with description slot correctly 1`] = `
-"<div data-orientation="horizontal" class="relative flex items-start gap-2.5">
-  <div class="inline-flex items-center justify-center p-0.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
+  <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-    <div class="text-[15px] text-pretty text-muted mt-1">Description slot</div>
+    <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+    <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description slot</div>
   </div>
 </div>"
 `;
 
 exports[`PageFeature > renders with icon correctly 1`] = `
-"<div data-orientation="horizontal" class="relative flex items-start gap-2.5">
-  <div class="inline-flex items-center justify-center p-0.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
+  <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
@@ -65,64 +65,64 @@ exports[`PageFeature > renders with icon correctly 1`] = `
 `;
 
 exports[`PageFeature > renders with leading slot correctly 1`] = `
-"<div data-orientation="horizontal" class="relative flex items-start gap-2.5">
-  <div class="inline-flex items-center justify-center p-0.5">Leading slot</div>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
+  <div data-slot="leading" class="inline-flex items-center justify-center p-0.5">Leading slot</div>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-    <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+    <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+    <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
   </div>
 </div>"
 `;
 
 exports[`PageFeature > renders with orientation horizontal correctly 1`] = `
-"<div data-orientation="horizontal" class="relative flex items-start gap-2.5">
-  <div class="inline-flex items-center justify-center p-0.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
+  <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-    <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+    <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+    <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
   </div>
 </div>"
 `;
 
 exports[`PageFeature > renders with orientation vertical correctly 1`] = `
-"<div data-orientation="vertical" class="relative">
-  <div class="inline-flex items-center justify-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-  <div class="">
+"<div data-orientation="vertical" data-slot="root" class="relative">
+  <div data-slot="leading" class="inline-flex items-center justify-center mb-2.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-    <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+    <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+    <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
   </div>
 </div>"
 `;
 
 exports[`PageFeature > renders with title correctly 1`] = `
-"<div data-orientation="horizontal" class="relative flex items-start gap-2.5">
+"<div data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
   <!--v-if-->
-  <div class="">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
+    <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`PageFeature > renders with title slot correctly 1`] = `
-"<div data-orientation="horizontal" class="relative flex items-start gap-2.5">
-  <div class="inline-flex items-center justify-center p-0.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
+  <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <div class="text-base text-pretty font-semibold text-highlighted">Title slot</div>
-    <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+    <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title slot</div>
+    <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
   </div>
 </div>"
 `;
 
 exports[`PageFeature > renders with to correctly 1`] = `
-"<div data-orientation="horizontal" class="relative flex items-start gap-2.5">
+"<div data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
   <!--v-if-->
-  <div class=""><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Feature link" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+  <div data-slot="wrapper" class=""><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Feature link" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -130,12 +130,12 @@ exports[`PageFeature > renders with to correctly 1`] = `
 `;
 
 exports[`PageFeature > renders with ui correctly 1`] = `
-"<div data-orientation="horizontal" class="relative flex items-start gap-2.5">
-  <div class="inline-flex items-center justify-center p-0.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
+  <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><span class="iconify i-lucide:house size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <div class="text-base text-pretty text-highlighted font-bold">Title</div>
-    <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+    <div data-slot="title" class="text-base text-pretty text-highlighted font-bold">Title</div>
+    <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
   </div>
 </div>"
 `;
diff --git a/test/components/__snapshots__/PageHeader-vue.spec.ts.snap b/test/components/__snapshots__/PageHeader-vue.spec.ts.snap
index 9a48c7e7a1..d8c253b038 100644
--- a/test/components/__snapshots__/PageHeader-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PageHeader-vue.spec.ts.snap
@@ -1,10 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PageHeader > renders with as correctly 1`] = `
-"<section class="relative border-b border-default py-8">
+"<section data-slot="root" class="relative border-b border-default py-8">
   <!--v-if-->
-  <div class="">
-    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+  <div data-slot="container" class="">
+    <div data-slot="wrapper" class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -14,10 +14,10 @@ exports[`PageHeader > renders with as correctly 1`] = `
 `;
 
 exports[`PageHeader > renders with class correctly 1`] = `
-"<div class="relative border-b border-default py-12">
+"<div data-slot="root" class="relative border-b border-default py-12">
   <!--v-if-->
-  <div class="">
-    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+  <div data-slot="container" class="">
+    <div data-slot="wrapper" class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -27,10 +27,10 @@ exports[`PageHeader > renders with class correctly 1`] = `
 `;
 
 exports[`PageHeader > renders with default slot correctly 1`] = `
-"<div class="relative border-b border-default py-8">
+"<div data-slot="root" class="relative border-b border-default py-8">
   <!--v-if-->
-  <div class="">
-    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+  <div data-slot="container" class="">
+    <div data-slot="wrapper" class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -40,36 +40,36 @@ exports[`PageHeader > renders with default slot correctly 1`] = `
 `;
 
 exports[`PageHeader > renders with description correctly 1`] = `
-"<div class="relative border-b border-default py-8">
+"<div data-slot="root" class="relative border-b border-default py-8">
   <!--v-if-->
-  <div class="">
-    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+  <div data-slot="container" class="">
+    <div data-slot="wrapper" class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div class="text-lg text-pretty text-muted">Description</div>
+    <div data-slot="description" class="text-lg text-pretty text-muted">Description</div>
   </div>
 </div>"
 `;
 
 exports[`PageHeader > renders with description slot correctly 1`] = `
-"<div class="relative border-b border-default py-8">
+"<div data-slot="root" class="relative border-b border-default py-8">
   <!--v-if-->
-  <div class="">
-    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+  <div data-slot="container" class="">
+    <div data-slot="wrapper" class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div class="text-lg text-pretty text-muted">Description slot</div>
+    <div data-slot="description" class="text-lg text-pretty text-muted">Description slot</div>
   </div>
 </div>"
 `;
 
 exports[`PageHeader > renders with headline correctly 1`] = `
-"<div class="relative border-b border-default py-8">
-  <div class="mb-2.5 text-sm font-semibold text-primary flex items-center gap-1.5">Headline</div>
-  <div class="">
-    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+"<div data-slot="root" class="relative border-b border-default py-8">
+  <div data-slot="headline" class="mb-2.5 text-sm font-semibold text-primary flex items-center gap-1.5">Headline</div>
+  <div data-slot="container" class="">
+    <div data-slot="wrapper" class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -79,10 +79,10 @@ exports[`PageHeader > renders with headline correctly 1`] = `
 `;
 
 exports[`PageHeader > renders with headline slot correctly 1`] = `
-"<div class="relative border-b border-default py-8">
-  <div class="mb-2.5 text-sm font-semibold text-primary flex items-center gap-1.5">Headline slot</div>
-  <div class="">
-    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+"<div data-slot="root" class="relative border-b border-default py-8">
+  <div data-slot="headline" class="mb-2.5 text-sm font-semibold text-primary flex items-center gap-1.5">Headline slot</div>
+  <div data-slot="container" class="">
+    <div data-slot="wrapper" class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -92,12 +92,12 @@ exports[`PageHeader > renders with headline slot correctly 1`] = `
 `;
 
 exports[`PageHeader > renders with links correctly 1`] = `
-"<div class="relative border-b border-default py-8">
+"<div data-slot="root" class="relative border-b border-default py-8">
   <!--v-if-->
-  <div class="">
-    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+  <div data-slot="container" class="">
+    <div data-slot="wrapper" class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
       <!--v-if-->
-      <div class="flex flex-wrap items-center gap-1.5"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">GitHub</span>
+      <div data-slot="links" class="flex flex-wrap items-center gap-1.5"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">GitHub</span>
           <!--v-if-->
         </button></div>
     </div>
@@ -107,12 +107,12 @@ exports[`PageHeader > renders with links correctly 1`] = `
 `;
 
 exports[`PageHeader > renders with links slot correctly 1`] = `
-"<div class="relative border-b border-default py-8">
+"<div data-slot="root" class="relative border-b border-default py-8">
   <!--v-if-->
-  <div class="">
-    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+  <div data-slot="container" class="">
+    <div data-slot="wrapper" class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
       <!--v-if-->
-      <div class="flex flex-wrap items-center gap-1.5">Links slot</div>
+      <div data-slot="links" class="flex flex-wrap items-center gap-1.5">Links slot</div>
     </div>
     <!--v-if-->
   </div>
@@ -120,11 +120,11 @@ exports[`PageHeader > renders with links slot correctly 1`] = `
 `;
 
 exports[`PageHeader > renders with title correctly 1`] = `
-"<div class="relative border-b border-default py-8">
+"<div data-slot="root" class="relative border-b border-default py-8">
   <!--v-if-->
-  <div class="">
-    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
-      <h1 class="text-3xl sm:text-4xl text-pretty font-bold text-highlighted">Title</h1>
+  <div data-slot="container" class="">
+    <div data-slot="wrapper" class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+      <h1 data-slot="title" class="text-3xl sm:text-4xl text-pretty font-bold text-highlighted">Title</h1>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -133,11 +133,11 @@ exports[`PageHeader > renders with title correctly 1`] = `
 `;
 
 exports[`PageHeader > renders with title slot correctly 1`] = `
-"<div class="relative border-b border-default py-8">
+"<div data-slot="root" class="relative border-b border-default py-8">
   <!--v-if-->
-  <div class="">
-    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
-      <h1 class="text-3xl sm:text-4xl text-pretty font-bold text-highlighted">Title slot</h1>
+  <div data-slot="container" class="">
+    <div data-slot="wrapper" class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+      <h1 data-slot="title" class="text-3xl sm:text-4xl text-pretty font-bold text-highlighted">Title slot</h1>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -146,10 +146,10 @@ exports[`PageHeader > renders with title slot correctly 1`] = `
 `;
 
 exports[`PageHeader > renders with ui correctly 1`] = `
-"<div class="relative border-b border-default py-8">
+"<div data-slot="root" class="relative border-b border-default py-8">
   <!--v-if-->
-  <div class="py-12">
-    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+  <div data-slot="container" class="py-12">
+    <div data-slot="wrapper" class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
       <!--v-if-->
       <!--v-if-->
     </div>
diff --git a/test/components/__snapshots__/PageHeader.spec.ts.snap b/test/components/__snapshots__/PageHeader.spec.ts.snap
index cba32b1967..c455ecf761 100644
--- a/test/components/__snapshots__/PageHeader.spec.ts.snap
+++ b/test/components/__snapshots__/PageHeader.spec.ts.snap
@@ -1,10 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PageHeader > renders with as correctly 1`] = `
-"<section class="relative border-b border-default py-8">
+"<section data-slot="root" class="relative border-b border-default py-8">
   <!--v-if-->
-  <div class="">
-    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+  <div data-slot="container" class="">
+    <div data-slot="wrapper" class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -14,10 +14,10 @@ exports[`PageHeader > renders with as correctly 1`] = `
 `;
 
 exports[`PageHeader > renders with class correctly 1`] = `
-"<div class="relative border-b border-default py-12">
+"<div data-slot="root" class="relative border-b border-default py-12">
   <!--v-if-->
-  <div class="">
-    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+  <div data-slot="container" class="">
+    <div data-slot="wrapper" class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -27,10 +27,10 @@ exports[`PageHeader > renders with class correctly 1`] = `
 `;
 
 exports[`PageHeader > renders with default slot correctly 1`] = `
-"<div class="relative border-b border-default py-8">
+"<div data-slot="root" class="relative border-b border-default py-8">
   <!--v-if-->
-  <div class="">
-    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+  <div data-slot="container" class="">
+    <div data-slot="wrapper" class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -40,36 +40,36 @@ exports[`PageHeader > renders with default slot correctly 1`] = `
 `;
 
 exports[`PageHeader > renders with description correctly 1`] = `
-"<div class="relative border-b border-default py-8">
+"<div data-slot="root" class="relative border-b border-default py-8">
   <!--v-if-->
-  <div class="">
-    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+  <div data-slot="container" class="">
+    <div data-slot="wrapper" class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div class="text-lg text-pretty text-muted">Description</div>
+    <div data-slot="description" class="text-lg text-pretty text-muted">Description</div>
   </div>
 </div>"
 `;
 
 exports[`PageHeader > renders with description slot correctly 1`] = `
-"<div class="relative border-b border-default py-8">
+"<div data-slot="root" class="relative border-b border-default py-8">
   <!--v-if-->
-  <div class="">
-    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+  <div data-slot="container" class="">
+    <div data-slot="wrapper" class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div class="text-lg text-pretty text-muted">Description slot</div>
+    <div data-slot="description" class="text-lg text-pretty text-muted">Description slot</div>
   </div>
 </div>"
 `;
 
 exports[`PageHeader > renders with headline correctly 1`] = `
-"<div class="relative border-b border-default py-8">
-  <div class="mb-2.5 text-sm font-semibold text-primary flex items-center gap-1.5">Headline</div>
-  <div class="">
-    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+"<div data-slot="root" class="relative border-b border-default py-8">
+  <div data-slot="headline" class="mb-2.5 text-sm font-semibold text-primary flex items-center gap-1.5">Headline</div>
+  <div data-slot="container" class="">
+    <div data-slot="wrapper" class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -79,10 +79,10 @@ exports[`PageHeader > renders with headline correctly 1`] = `
 `;
 
 exports[`PageHeader > renders with headline slot correctly 1`] = `
-"<div class="relative border-b border-default py-8">
-  <div class="mb-2.5 text-sm font-semibold text-primary flex items-center gap-1.5">Headline slot</div>
-  <div class="">
-    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+"<div data-slot="root" class="relative border-b border-default py-8">
+  <div data-slot="headline" class="mb-2.5 text-sm font-semibold text-primary flex items-center gap-1.5">Headline slot</div>
+  <div data-slot="container" class="">
+    <div data-slot="wrapper" class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -92,12 +92,12 @@ exports[`PageHeader > renders with headline slot correctly 1`] = `
 `;
 
 exports[`PageHeader > renders with links correctly 1`] = `
-"<div class="relative border-b border-default py-8">
+"<div data-slot="root" class="relative border-b border-default py-8">
   <!--v-if-->
-  <div class="">
-    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+  <div data-slot="container" class="">
+    <div data-slot="wrapper" class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
       <!--v-if-->
-      <div class="flex flex-wrap items-center gap-1.5"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"><span class="iconify i-simple-icons:github shrink-0 size-5" aria-hidden="true"></span><span class="truncate">GitHub</span>
+      <div data-slot="links" class="flex flex-wrap items-center gap-1.5"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"><span class="iconify i-simple-icons:github shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">GitHub</span>
           <!--v-if-->
         </button></div>
     </div>
@@ -107,12 +107,12 @@ exports[`PageHeader > renders with links correctly 1`] = `
 `;
 
 exports[`PageHeader > renders with links slot correctly 1`] = `
-"<div class="relative border-b border-default py-8">
+"<div data-slot="root" class="relative border-b border-default py-8">
   <!--v-if-->
-  <div class="">
-    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+  <div data-slot="container" class="">
+    <div data-slot="wrapper" class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
       <!--v-if-->
-      <div class="flex flex-wrap items-center gap-1.5">Links slot</div>
+      <div data-slot="links" class="flex flex-wrap items-center gap-1.5">Links slot</div>
     </div>
     <!--v-if-->
   </div>
@@ -120,11 +120,11 @@ exports[`PageHeader > renders with links slot correctly 1`] = `
 `;
 
 exports[`PageHeader > renders with title correctly 1`] = `
-"<div class="relative border-b border-default py-8">
+"<div data-slot="root" class="relative border-b border-default py-8">
   <!--v-if-->
-  <div class="">
-    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
-      <h1 class="text-3xl sm:text-4xl text-pretty font-bold text-highlighted">Title</h1>
+  <div data-slot="container" class="">
+    <div data-slot="wrapper" class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+      <h1 data-slot="title" class="text-3xl sm:text-4xl text-pretty font-bold text-highlighted">Title</h1>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -133,11 +133,11 @@ exports[`PageHeader > renders with title correctly 1`] = `
 `;
 
 exports[`PageHeader > renders with title slot correctly 1`] = `
-"<div class="relative border-b border-default py-8">
+"<div data-slot="root" class="relative border-b border-default py-8">
   <!--v-if-->
-  <div class="">
-    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
-      <h1 class="text-3xl sm:text-4xl text-pretty font-bold text-highlighted">Title slot</h1>
+  <div data-slot="container" class="">
+    <div data-slot="wrapper" class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+      <h1 data-slot="title" class="text-3xl sm:text-4xl text-pretty font-bold text-highlighted">Title slot</h1>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -146,10 +146,10 @@ exports[`PageHeader > renders with title slot correctly 1`] = `
 `;
 
 exports[`PageHeader > renders with ui correctly 1`] = `
-"<div class="relative border-b border-default py-8">
+"<div data-slot="root" class="relative border-b border-default py-8">
   <!--v-if-->
-  <div class="py-12">
-    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+  <div data-slot="container" class="py-12">
+    <div data-slot="wrapper" class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
       <!--v-if-->
       <!--v-if-->
     </div>
diff --git a/test/components/__snapshots__/PageHero-vue.spec.ts.snap b/test/components/__snapshots__/PageHero-vue.spec.ts.snap
index 16e4aa38d9..e11e68ff8b 100644
--- a/test/components/__snapshots__/PageHero-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PageHero-vue.spec.ts.snap
@@ -1,17 +1,17 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PageHero > renders with as correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24"></div>
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container"></div>
 </section>"
 `;
 
 exports[`PageHero > renders with body slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24">
-    <div class="text-center">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container">
+    <div data-slot="wrapper" class="text-center">
       <!--v-if-->
-      <div class="mt-10">Body slot</div>
+      <div data-slot="body" class="mt-10">Body slot</div>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -20,33 +20,33 @@ exports[`PageHero > renders with body slot correctly 1`] = `
 `;
 
 exports[`PageHero > renders with bottom slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24"></div>Bottom slot
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container"></div>Bottom slot
 </div>"
 `;
 
 exports[`PageHero > renders with class correctly 1`] = `
-"<div data-orientation="vertical" class="isolate absolute">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24"></div>
+"<div data-orientation="vertical" data-slot="root" class="isolate absolute">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container"></div>
 </div>"
 `;
 
 exports[`PageHero > renders with default slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container">
     <!--v-if-->Default slot
   </div>
 </div>"
 `;
 
 exports[`PageHero > renders with description correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24">
-    <div class="text-center">
-      <div class="">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container">
+    <div data-slot="wrapper" class="text-center">
+      <div data-slot="header" class="">
         <!--v-if-->
         <!--v-if-->
-        <div class="text-lg sm:text-xl/8 text-muted text-balance">Description</div>
+        <div data-slot="description" class="text-lg sm:text-xl/8 text-muted text-balance">Description</div>
       </div>
       <!--v-if-->
       <!--v-if-->
@@ -57,13 +57,13 @@ exports[`PageHero > renders with description correctly 1`] = `
 `;
 
 exports[`PageHero > renders with description slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24">
-    <div class="text-center">
-      <div class="">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container">
+    <div data-slot="wrapper" class="text-center">
+      <div data-slot="header" class="">
         <!--v-if-->
         <!--v-if-->
-        <div class="text-lg sm:text-xl/8 text-muted text-balance">Description slot</div>
+        <div data-slot="description" class="text-lg sm:text-xl/8 text-muted text-balance">Description slot</div>
       </div>
       <!--v-if-->
       <!--v-if-->
@@ -74,12 +74,12 @@ exports[`PageHero > renders with description slot correctly 1`] = `
 `;
 
 exports[`PageHero > renders with footer slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24">
-    <div class="text-center">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container">
+    <div data-slot="wrapper" class="text-center">
       <!--v-if-->
       <!--v-if-->
-      <div class="mt-10">Footer slot</div>
+      <div data-slot="footer" class="mt-10">Footer slot</div>
     </div>
     <!--v-if-->
   </div>
@@ -87,10 +87,10 @@ exports[`PageHero > renders with footer slot correctly 1`] = `
 `;
 
 exports[`PageHero > renders with header slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24">
-    <div class="text-center">
-      <div class="">Header slot</div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container">
+    <div data-slot="wrapper" class="text-center">
+      <div data-slot="header" class="">Header slot</div>
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -100,11 +100,11 @@ exports[`PageHero > renders with header slot correctly 1`] = `
 `;
 
 exports[`PageHero > renders with headline slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24">
-    <div class="text-center">
-      <div class="">
-        <div class="mb-4 justify-center">Headline slot</div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container">
+    <div data-slot="wrapper" class="text-center">
+      <div data-slot="header" class="">
+        <div data-slot="headline" class="mb-4 justify-center">Headline slot</div>
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -117,14 +117,14 @@ exports[`PageHero > renders with headline slot correctly 1`] = `
 `;
 
 exports[`PageHero > renders with links correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24">
-    <div class="text-center">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container">
+    <div data-slot="wrapper" class="text-center">
       <!--v-if-->
       <!--v-if-->
-      <div class="mt-10">
-        <div class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-            <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="footer" class="mt-10">
+        <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
       </div>
@@ -135,13 +135,13 @@ exports[`PageHero > renders with links correctly 1`] = `
 `;
 
 exports[`PageHero > renders with links slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24">
-    <div class="text-center">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container">
+    <div data-slot="wrapper" class="text-center">
       <!--v-if-->
       <!--v-if-->
-      <div class="mt-10">
-        <div class="flex flex-wrap gap-x-6 gap-y-3 justify-center">Links slot</div>
+      <div data-slot="footer" class="mt-10">
+        <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center">Links slot</div>
       </div>
     </div>
     <!--v-if-->
@@ -150,8 +150,8 @@ exports[`PageHero > renders with links slot correctly 1`] = `
 `;
 
 exports[`PageHero > renders with orientation horizontal correctly 1`] = `
-"<div data-orientation="horizontal" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24 lg:grid-cols-2 lg:items-center">
+"<div data-orientation="horizontal" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24 lg:grid-cols-2 lg:items-center" data-slot="container">
     <!--v-if-->
     <div class="hidden lg:block"></div>
   </div>
@@ -159,14 +159,14 @@ exports[`PageHero > renders with orientation horizontal correctly 1`] = `
 `;
 
 exports[`PageHero > renders with orientation horizontal links correctly 1`] = `
-"<div data-orientation="horizontal" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24 lg:grid-cols-2 lg:items-center">
-    <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24 lg:grid-cols-2 lg:items-center" data-slot="container">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-      <div class="mt-10">
-        <div class="flex flex-wrap gap-x-6 gap-y-3"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-            <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="footer" class="mt-10">
+        <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
       </div>
@@ -177,8 +177,8 @@ exports[`PageHero > renders with orientation horizontal links correctly 1`] = `
 `;
 
 exports[`PageHero > renders with orientation horizontal reverse correctly 1`] = `
-"<div data-orientation="horizontal" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24 lg:grid-cols-2 lg:items-center">
+"<div data-orientation="horizontal" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24 lg:grid-cols-2 lg:items-center" data-slot="container">
     <!--v-if-->
     <div class="hidden lg:block"></div>
   </div>
@@ -186,18 +186,18 @@ exports[`PageHero > renders with orientation horizontal reverse correctly 1`] =
 `;
 
 exports[`PageHero > renders with reverse correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24"></div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container"></div>
 </div>"
 `;
 
 exports[`PageHero > renders with title correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24">
-    <div class="text-center">
-      <div class="">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container">
+    <div data-slot="wrapper" class="text-center">
+      <div data-slot="header" class="">
         <!--v-if-->
-        <h1 class="text-5xl sm:text-7xl text-pretty tracking-tight font-bold text-highlighted">Title</h1>
+        <h1 data-slot="title" class="text-5xl sm:text-7xl text-pretty tracking-tight font-bold text-highlighted">Title</h1>
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -209,12 +209,12 @@ exports[`PageHero > renders with title correctly 1`] = `
 `;
 
 exports[`PageHero > renders with title slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24">
-    <div class="text-center">
-      <div class="">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container">
+    <div data-slot="wrapper" class="text-center">
+      <div data-slot="header" class="">
         <!--v-if-->
-        <h1 class="text-5xl sm:text-7xl text-pretty tracking-tight font-bold text-highlighted">Title slot</h1>
+        <h1 data-slot="title" class="text-5xl sm:text-7xl text-pretty tracking-tight font-bold text-highlighted">Title slot</h1>
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -226,12 +226,12 @@ exports[`PageHero > renders with title slot correctly 1`] = `
 `;
 
 exports[`PageHero > renders with top slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">Top slot<div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24"></div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">Top slot<div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container"></div>
 </div>"
 `;
 
 exports[`PageHero > renders with ui correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24 max-w-5xl"></div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24 max-w-5xl" data-slot="container"></div>
 </div>"
 `;
diff --git a/test/components/__snapshots__/PageHero.spec.ts.snap b/test/components/__snapshots__/PageHero.spec.ts.snap
index 16e4aa38d9..e11e68ff8b 100644
--- a/test/components/__snapshots__/PageHero.spec.ts.snap
+++ b/test/components/__snapshots__/PageHero.spec.ts.snap
@@ -1,17 +1,17 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PageHero > renders with as correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24"></div>
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container"></div>
 </section>"
 `;
 
 exports[`PageHero > renders with body slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24">
-    <div class="text-center">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container">
+    <div data-slot="wrapper" class="text-center">
       <!--v-if-->
-      <div class="mt-10">Body slot</div>
+      <div data-slot="body" class="mt-10">Body slot</div>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -20,33 +20,33 @@ exports[`PageHero > renders with body slot correctly 1`] = `
 `;
 
 exports[`PageHero > renders with bottom slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24"></div>Bottom slot
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container"></div>Bottom slot
 </div>"
 `;
 
 exports[`PageHero > renders with class correctly 1`] = `
-"<div data-orientation="vertical" class="isolate absolute">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24"></div>
+"<div data-orientation="vertical" data-slot="root" class="isolate absolute">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container"></div>
 </div>"
 `;
 
 exports[`PageHero > renders with default slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container">
     <!--v-if-->Default slot
   </div>
 </div>"
 `;
 
 exports[`PageHero > renders with description correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24">
-    <div class="text-center">
-      <div class="">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container">
+    <div data-slot="wrapper" class="text-center">
+      <div data-slot="header" class="">
         <!--v-if-->
         <!--v-if-->
-        <div class="text-lg sm:text-xl/8 text-muted text-balance">Description</div>
+        <div data-slot="description" class="text-lg sm:text-xl/8 text-muted text-balance">Description</div>
       </div>
       <!--v-if-->
       <!--v-if-->
@@ -57,13 +57,13 @@ exports[`PageHero > renders with description correctly 1`] = `
 `;
 
 exports[`PageHero > renders with description slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24">
-    <div class="text-center">
-      <div class="">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container">
+    <div data-slot="wrapper" class="text-center">
+      <div data-slot="header" class="">
         <!--v-if-->
         <!--v-if-->
-        <div class="text-lg sm:text-xl/8 text-muted text-balance">Description slot</div>
+        <div data-slot="description" class="text-lg sm:text-xl/8 text-muted text-balance">Description slot</div>
       </div>
       <!--v-if-->
       <!--v-if-->
@@ -74,12 +74,12 @@ exports[`PageHero > renders with description slot correctly 1`] = `
 `;
 
 exports[`PageHero > renders with footer slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24">
-    <div class="text-center">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container">
+    <div data-slot="wrapper" class="text-center">
       <!--v-if-->
       <!--v-if-->
-      <div class="mt-10">Footer slot</div>
+      <div data-slot="footer" class="mt-10">Footer slot</div>
     </div>
     <!--v-if-->
   </div>
@@ -87,10 +87,10 @@ exports[`PageHero > renders with footer slot correctly 1`] = `
 `;
 
 exports[`PageHero > renders with header slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24">
-    <div class="text-center">
-      <div class="">Header slot</div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container">
+    <div data-slot="wrapper" class="text-center">
+      <div data-slot="header" class="">Header slot</div>
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -100,11 +100,11 @@ exports[`PageHero > renders with header slot correctly 1`] = `
 `;
 
 exports[`PageHero > renders with headline slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24">
-    <div class="text-center">
-      <div class="">
-        <div class="mb-4 justify-center">Headline slot</div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container">
+    <div data-slot="wrapper" class="text-center">
+      <div data-slot="header" class="">
+        <div data-slot="headline" class="mb-4 justify-center">Headline slot</div>
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -117,14 +117,14 @@ exports[`PageHero > renders with headline slot correctly 1`] = `
 `;
 
 exports[`PageHero > renders with links correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24">
-    <div class="text-center">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container">
+    <div data-slot="wrapper" class="text-center">
       <!--v-if-->
       <!--v-if-->
-      <div class="mt-10">
-        <div class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-            <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="footer" class="mt-10">
+        <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
       </div>
@@ -135,13 +135,13 @@ exports[`PageHero > renders with links correctly 1`] = `
 `;
 
 exports[`PageHero > renders with links slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24">
-    <div class="text-center">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container">
+    <div data-slot="wrapper" class="text-center">
       <!--v-if-->
       <!--v-if-->
-      <div class="mt-10">
-        <div class="flex flex-wrap gap-x-6 gap-y-3 justify-center">Links slot</div>
+      <div data-slot="footer" class="mt-10">
+        <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center">Links slot</div>
       </div>
     </div>
     <!--v-if-->
@@ -150,8 +150,8 @@ exports[`PageHero > renders with links slot correctly 1`] = `
 `;
 
 exports[`PageHero > renders with orientation horizontal correctly 1`] = `
-"<div data-orientation="horizontal" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24 lg:grid-cols-2 lg:items-center">
+"<div data-orientation="horizontal" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24 lg:grid-cols-2 lg:items-center" data-slot="container">
     <!--v-if-->
     <div class="hidden lg:block"></div>
   </div>
@@ -159,14 +159,14 @@ exports[`PageHero > renders with orientation horizontal correctly 1`] = `
 `;
 
 exports[`PageHero > renders with orientation horizontal links correctly 1`] = `
-"<div data-orientation="horizontal" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24 lg:grid-cols-2 lg:items-center">
-    <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24 lg:grid-cols-2 lg:items-center" data-slot="container">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-      <div class="mt-10">
-        <div class="flex flex-wrap gap-x-6 gap-y-3"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-            <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="footer" class="mt-10">
+        <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
       </div>
@@ -177,8 +177,8 @@ exports[`PageHero > renders with orientation horizontal links correctly 1`] = `
 `;
 
 exports[`PageHero > renders with orientation horizontal reverse correctly 1`] = `
-"<div data-orientation="horizontal" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24 lg:grid-cols-2 lg:items-center">
+"<div data-orientation="horizontal" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24 lg:grid-cols-2 lg:items-center" data-slot="container">
     <!--v-if-->
     <div class="hidden lg:block"></div>
   </div>
@@ -186,18 +186,18 @@ exports[`PageHero > renders with orientation horizontal reverse correctly 1`] =
 `;
 
 exports[`PageHero > renders with reverse correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24"></div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container"></div>
 </div>"
 `;
 
 exports[`PageHero > renders with title correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24">
-    <div class="text-center">
-      <div class="">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container">
+    <div data-slot="wrapper" class="text-center">
+      <div data-slot="header" class="">
         <!--v-if-->
-        <h1 class="text-5xl sm:text-7xl text-pretty tracking-tight font-bold text-highlighted">Title</h1>
+        <h1 data-slot="title" class="text-5xl sm:text-7xl text-pretty tracking-tight font-bold text-highlighted">Title</h1>
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -209,12 +209,12 @@ exports[`PageHero > renders with title correctly 1`] = `
 `;
 
 exports[`PageHero > renders with title slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24">
-    <div class="text-center">
-      <div class="">
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container">
+    <div data-slot="wrapper" class="text-center">
+      <div data-slot="header" class="">
         <!--v-if-->
-        <h1 class="text-5xl sm:text-7xl text-pretty tracking-tight font-bold text-highlighted">Title slot</h1>
+        <h1 data-slot="title" class="text-5xl sm:text-7xl text-pretty tracking-tight font-bold text-highlighted">Title slot</h1>
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -226,12 +226,12 @@ exports[`PageHero > renders with title slot correctly 1`] = `
 `;
 
 exports[`PageHero > renders with top slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">Top slot<div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24"></div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">Top slot<div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24" data-slot="container"></div>
 </div>"
 `;
 
 exports[`PageHero > renders with ui correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24 max-w-5xl"></div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24 max-w-5xl" data-slot="container"></div>
 </div>"
 `;
diff --git a/test/components/__snapshots__/PageLinks-vue.spec.ts.snap b/test/components/__snapshots__/PageLinks-vue.spec.ts.snap
index 4e558041e3..a36534d20d 100644
--- a/test/components/__snapshots__/PageLinks-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PageLinks-vue.spec.ts.snap
@@ -1,121 +1,121 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PageLinks > renders with as correctly 1`] = `
-"<div class="flex flex-col gap-3">
+"<div data-slot="root" class="flex flex-col gap-3">
   <!--v-if-->
-  <ul class="flex flex-col gap-2">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Documentation<!--v-if--></span></a></li>
-    <li class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Playground<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
-    <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Roadmap<!--v-if--></span></button></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
+  <ul data-slot="list" class="flex flex-col gap-2">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span></a></li>
+    <li data-slot="item" class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Playground<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
+    <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span></button></li>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
   </ul>
 </div>"
 `;
 
 exports[`PageLinks > renders with class correctly 1`] = `
-"<nav class="flex flex-col gap-1.5">
+"<nav data-slot="root" class="flex flex-col gap-1.5">
   <!--v-if-->
-  <ul class="flex flex-col gap-2">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Documentation<!--v-if--></span></a></li>
-    <li class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Playground<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
-    <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Roadmap<!--v-if--></span></button></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
+  <ul data-slot="list" class="flex flex-col gap-2">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span></a></li>
+    <li data-slot="item" class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Playground<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
+    <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span></button></li>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageLinks > renders with link slot correctly 1`] = `
-"<nav class="flex flex-col gap-3">
+"<nav data-slot="root" class="flex flex-col gap-3">
   <!--v-if-->
-  <ul class="flex flex-col gap-2">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
-    <li class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
-    <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium">Link slot</button></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
+  <ul data-slot="list" class="flex flex-col gap-2">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
+    <li data-slot="item" class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
+    <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium">Link slot</button></li>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageLinks > renders with link-label slot correctly 1`] = `
-"<nav class="flex flex-col gap-3">
+"<nav data-slot="root" class="flex flex-col gap-3">
   <!--v-if-->
-  <ul class="flex flex-col gap-2">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Link label slot<!--v-if--></span></a></li>
-    <li class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Link label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
-    <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Link label slot<!--v-if--></span></button></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Link label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
+  <ul data-slot="list" class="flex flex-col gap-2">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Link label slot<!--v-if--></span></a></li>
+    <li data-slot="item" class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Link label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
+    <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Link label slot<!--v-if--></span></button></li>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Link label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageLinks > renders with link-leading slot correctly 1`] = `
-"<nav class="flex flex-col gap-3">
+"<nav data-slot="root" class="flex flex-col gap-3">
   <!--v-if-->
-  <ul class="flex flex-col gap-2">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Documentation<!--v-if--></span></a></li>
-    <li class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Playground<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
-    <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium">Link leading slot<span class="truncate">Roadmap<!--v-if--></span></button></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
+  <ul data-slot="list" class="flex flex-col gap-2">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span></a></li>
+    <li data-slot="item" class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Playground<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
+    <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium">Link leading slot<span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span></button></li>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageLinks > renders with link-trailing slot correctly 1`] = `
-"<nav class="flex flex-col gap-3">
+"<nav data-slot="root" class="flex flex-col gap-3">
   <!--v-if-->
-  <ul class="flex flex-col gap-2">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Documentation<!--v-if--></span>Link trailing slot</a></li>
-    <li class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Playground<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed"></svg></span>Link trailing slot</a></li>
-    <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Roadmap<!--v-if--></span>Link trailing slot</button></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed"></svg></span>Link trailing slot</a></li>
+  <ul data-slot="list" class="flex flex-col gap-2">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>Link trailing slot</a></li>
+    <li data-slot="item" class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Playground<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed"></svg></span>Link trailing slot</a></li>
+    <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span>Link trailing slot</button></li>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed"></svg></span>Link trailing slot</a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageLinks > renders with links correctly 1`] = `
-"<nav class="flex flex-col gap-3">
+"<nav data-slot="root" class="flex flex-col gap-3">
   <!--v-if-->
-  <ul class="flex flex-col gap-2">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Documentation<!--v-if--></span></a></li>
-    <li class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Playground<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
-    <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Roadmap<!--v-if--></span></button></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
+  <ul data-slot="list" class="flex flex-col gap-2">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span></a></li>
+    <li data-slot="item" class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Playground<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
+    <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span></button></li>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageLinks > renders with title correctly 1`] = `
-"<nav class="flex flex-col gap-3">
-  <p class="text-sm font-semibold flex items-center gap-1.5">Resources</p>
-  <ul class="flex flex-col gap-2">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Documentation<!--v-if--></span></a></li>
-    <li class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Playground<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
-    <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Roadmap<!--v-if--></span></button></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
+"<nav data-slot="root" class="flex flex-col gap-3">
+  <p data-slot="title" class="text-sm font-semibold flex items-center gap-1.5">Resources</p>
+  <ul data-slot="list" class="flex flex-col gap-2">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span></a></li>
+    <li data-slot="item" class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Playground<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
+    <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span></button></li>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageLinks > renders with title slot correctly 1`] = `
-"<nav class="flex flex-col gap-3">
-  <p class="text-sm font-semibold flex items-center gap-1.5">Title slot</p>
-  <ul class="flex flex-col gap-2">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Documentation<!--v-if--></span></a></li>
-    <li class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Playground<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
-    <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Roadmap<!--v-if--></span></button></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
+"<nav data-slot="root" class="flex flex-col gap-3">
+  <p data-slot="title" class="text-sm font-semibold flex items-center gap-1.5">Title slot</p>
+  <ul data-slot="list" class="flex flex-col gap-2">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span></a></li>
+    <li data-slot="item" class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Playground<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
+    <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span></button></li>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageLinks > renders with ui correctly 1`] = `
-"<nav class="flex flex-col gap-3">
+"<nav data-slot="root" class="flex flex-col gap-3">
   <!--v-if-->
-  <ul class="flex flex-col gap-3">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Documentation<!--v-if--></span></a></li>
-    <li class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Playground<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
-    <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Roadmap<!--v-if--></span></button></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg><span class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
+  <ul data-slot="list" class="flex flex-col gap-3">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span></a></li>
+    <li data-slot="item" class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Playground<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
+    <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span></button></li>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="size-5 shrink-0"></svg><span data-slot="linkLabel" class="truncate">Releases<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="size-3 absolute top-0 text-dimmed"></svg></span></a></li>
   </ul>
 </nav>"
 `;
diff --git a/test/components/__snapshots__/PageLinks.spec.ts.snap b/test/components/__snapshots__/PageLinks.spec.ts.snap
index 46ae3d8d64..01bd4ed3db 100644
--- a/test/components/__snapshots__/PageLinks.spec.ts.snap
+++ b/test/components/__snapshots__/PageLinks.spec.ts.snap
@@ -1,121 +1,121 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PageLinks > renders with as correctly 1`] = `
-"<div class="flex flex-col gap-3">
+"<div data-slot="root" class="flex flex-col gap-3">
   <!--v-if-->
-  <ul class="flex flex-col gap-2">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:book-open size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span></a></li>
-    <li class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-simple-icons:stackblitz size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Playground<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true"></span></span></a></li>
-    <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><span class="iconify i-lucide:map size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Roadmap<!--v-if--></span></button></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:rocket size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true"></span></span></a></li>
+  <ul data-slot="list" class="flex flex-col gap-2">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:book-open size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span></a></li>
+    <li data-slot="item" class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-simple-icons:stackblitz size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Playground<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
+    <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><span class="iconify i-lucide:map size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span></button></li>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:rocket size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
   </ul>
 </div>"
 `;
 
 exports[`PageLinks > renders with class correctly 1`] = `
-"<nav class="flex flex-col gap-1.5">
+"<nav data-slot="root" class="flex flex-col gap-1.5">
   <!--v-if-->
-  <ul class="flex flex-col gap-2">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:book-open size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span></a></li>
-    <li class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-simple-icons:stackblitz size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Playground<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true"></span></span></a></li>
-    <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><span class="iconify i-lucide:map size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Roadmap<!--v-if--></span></button></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:rocket size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true"></span></span></a></li>
+  <ul data-slot="list" class="flex flex-col gap-2">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:book-open size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span></a></li>
+    <li data-slot="item" class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-simple-icons:stackblitz size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Playground<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
+    <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><span class="iconify i-lucide:map size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span></button></li>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:rocket size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageLinks > renders with link slot correctly 1`] = `
-"<nav class="flex flex-col gap-3">
+"<nav data-slot="root" class="flex flex-col gap-3">
   <!--v-if-->
-  <ul class="flex flex-col gap-2">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
-    <li class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
-    <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium">Link slot</button></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
+  <ul data-slot="list" class="flex flex-col gap-2">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
+    <li data-slot="item" class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
+    <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium">Link slot</button></li>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link slot</a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageLinks > renders with link-label slot correctly 1`] = `
-"<nav class="flex flex-col gap-3">
+"<nav data-slot="root" class="flex flex-col gap-3">
   <!--v-if-->
-  <ul class="flex flex-col gap-2">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:book-open size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Link label slot<!--v-if--></span></a></li>
-    <li class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-simple-icons:stackblitz size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Link label slot<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true"></span></span></a></li>
-    <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><span class="iconify i-lucide:map size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Link label slot<!--v-if--></span></button></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:rocket size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Link label slot<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true"></span></span></a></li>
+  <ul data-slot="list" class="flex flex-col gap-2">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:book-open size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Link label slot<!--v-if--></span></a></li>
+    <li data-slot="item" class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-simple-icons:stackblitz size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Link label slot<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
+    <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><span class="iconify i-lucide:map size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Link label slot<!--v-if--></span></button></li>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:rocket size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Link label slot<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageLinks > renders with link-leading slot correctly 1`] = `
-"<nav class="flex flex-col gap-3">
+"<nav data-slot="root" class="flex flex-col gap-3">
   <!--v-if-->
-  <ul class="flex flex-col gap-2">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Documentation<!--v-if--></span></a></li>
-    <li class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Playground<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true"></span></span></a></li>
-    <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium">Link leading slot<span class="truncate">Roadmap<!--v-if--></span></button></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true"></span></span></a></li>
+  <ul data-slot="list" class="flex flex-col gap-2">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span></a></li>
+    <li data-slot="item" class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Playground<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
+    <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium">Link leading slot<span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span></button></li>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors">Link leading slot<span data-slot="linkLabel" class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageLinks > renders with link-trailing slot correctly 1`] = `
-"<nav class="flex flex-col gap-3">
+"<nav data-slot="root" class="flex flex-col gap-3">
   <!--v-if-->
-  <ul class="flex flex-col gap-2">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:book-open size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span>Link trailing slot</a></li>
-    <li class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-simple-icons:stackblitz size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Playground<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true"></span></span>Link trailing slot</a></li>
-    <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><span class="iconify i-lucide:map size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Roadmap<!--v-if--></span>Link trailing slot</button></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:rocket size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true"></span></span>Link trailing slot</a></li>
+  <ul data-slot="list" class="flex flex-col gap-2">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:book-open size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span>Link trailing slot</a></li>
+    <li data-slot="item" class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-simple-icons:stackblitz size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Playground<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>Link trailing slot</a></li>
+    <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><span class="iconify i-lucide:map size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span>Link trailing slot</button></li>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:rocket size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span>Link trailing slot</a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageLinks > renders with links correctly 1`] = `
-"<nav class="flex flex-col gap-3">
+"<nav data-slot="root" class="flex flex-col gap-3">
   <!--v-if-->
-  <ul class="flex flex-col gap-2">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:book-open size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span></a></li>
-    <li class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-simple-icons:stackblitz size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Playground<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true"></span></span></a></li>
-    <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><span class="iconify i-lucide:map size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Roadmap<!--v-if--></span></button></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:rocket size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true"></span></span></a></li>
+  <ul data-slot="list" class="flex flex-col gap-2">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:book-open size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span></a></li>
+    <li data-slot="item" class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-simple-icons:stackblitz size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Playground<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
+    <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><span class="iconify i-lucide:map size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span></button></li>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:rocket size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageLinks > renders with title correctly 1`] = `
-"<nav class="flex flex-col gap-3">
-  <p class="text-sm font-semibold flex items-center gap-1.5">Resources</p>
-  <ul class="flex flex-col gap-2">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:book-open size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span></a></li>
-    <li class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-simple-icons:stackblitz size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Playground<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true"></span></span></a></li>
-    <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><span class="iconify i-lucide:map size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Roadmap<!--v-if--></span></button></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:rocket size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true"></span></span></a></li>
+"<nav data-slot="root" class="flex flex-col gap-3">
+  <p data-slot="title" class="text-sm font-semibold flex items-center gap-1.5">Resources</p>
+  <ul data-slot="list" class="flex flex-col gap-2">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:book-open size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span></a></li>
+    <li data-slot="item" class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-simple-icons:stackblitz size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Playground<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
+    <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><span class="iconify i-lucide:map size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span></button></li>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:rocket size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageLinks > renders with title slot correctly 1`] = `
-"<nav class="flex flex-col gap-3">
-  <p class="text-sm font-semibold flex items-center gap-1.5">Title slot</p>
-  <ul class="flex flex-col gap-2">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:book-open size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span></a></li>
-    <li class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-simple-icons:stackblitz size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Playground<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true"></span></span></a></li>
-    <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><span class="iconify i-lucide:map size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Roadmap<!--v-if--></span></button></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:rocket size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true"></span></span></a></li>
+"<nav data-slot="root" class="flex flex-col gap-3">
+  <p data-slot="title" class="text-sm font-semibold flex items-center gap-1.5">Title slot</p>
+  <ul data-slot="list" class="flex flex-col gap-2">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:book-open size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span></a></li>
+    <li data-slot="item" class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-simple-icons:stackblitz size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Playground<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
+    <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><span class="iconify i-lucide:map size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span></button></li>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:rocket size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
   </ul>
 </nav>"
 `;
 
 exports[`PageLinks > renders with ui correctly 1`] = `
-"<nav class="flex flex-col gap-3">
+"<nav data-slot="root" class="flex flex-col gap-3">
   <!--v-if-->
-  <ul class="flex flex-col gap-3">
-    <li class="relative"><a href="/docs" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:book-open size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span></a></li>
-    <li class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-simple-icons:stackblitz size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Playground<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true"></span></span></a></li>
-    <li class="relative"><button type="button" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><span class="iconify i-lucide:map size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Roadmap<!--v-if--></span></button></li>
-    <li class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:rocket size-5 shrink-0" aria-hidden="true"></span><span class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true"></span></span></a></li>
+  <ul data-slot="list" class="flex flex-col gap-3">
+    <li data-slot="item" class="relative"><a href="/docs" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:book-open size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Documentation<!--v-if--></span></a></li>
+    <li data-slot="item" class="relative"><a href="https://stackblitz.com/edit/nuxt-ui" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-simple-icons:stackblitz size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Playground<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
+    <li data-slot="item" class="relative"><button type="button" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-primary font-medium"><span class="iconify i-lucide:map size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Roadmap<!--v-if--></span></button></li>
+    <li data-slot="item" class="relative"><a href="https://github.com/nuxt/ui/releases" rel="noopener noreferrer" target="_blank" data-slot="link" class="group text-sm flex items-center gap-1.5 focus-visible:outline-primary text-muted hover:text-default transition-colors"><span class="iconify i-lucide:rocket size-5 shrink-0" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Releases<span class="iconify i-lucide:arrow-up-right size-3 absolute top-0 text-dimmed" aria-hidden="true" data-slot="linkLabelExternalIcon"></span></span></a></li>
   </ul>
 </nav>"
 `;
diff --git a/test/components/__snapshots__/PageLogos-vue.spec.ts.snap b/test/components/__snapshots__/PageLogos-vue.spec.ts.snap
index ba56104a1f..927dc56211 100644
--- a/test/components/__snapshots__/PageLogos-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PageLogos-vue.spec.ts.snap
@@ -1,69 +1,69 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PageLogos > renders with as correctly 1`] = `
-"<section class="relative overflow-hidden">
+"<section data-slot="root" class="relative overflow-hidden">
   <!--v-if-->
-  <div class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]">
+  <div data-slot="logos" class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]">
     <!--v-if-->
   </div>
 </section>"
 `;
 
 exports[`PageLogos > renders with class correctly 1`] = `
-"<div class="relative overflow-hidden text-xl">
+"<div data-slot="root" class="relative overflow-hidden text-xl">
   <!--v-if-->
-  <div class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]">
+  <div data-slot="logos" class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`PageLogos > renders with default slot correctly 1`] = `
-"<div class="relative overflow-hidden">
+"<div data-slot="root" class="relative overflow-hidden">
   <!--v-if-->
-  <div class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]">Default slot</div>
+  <div data-slot="logos" class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]">Default slot</div>
 </div>"
 `;
 
 exports[`PageLogos > renders with default slot correctly 2`] = `
-"<div class="relative overflow-hidden">
+"<div data-slot="root" class="relative overflow-hidden">
   <!--v-if-->
-  <div class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]">Default slot</div>
+  <div data-slot="logos" class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]">Default slot</div>
 </div>"
 `;
 
 exports[`PageLogos > renders with items correctly 1`] = `
-"<div class="relative overflow-hidden">
+"<div data-slot="root" class="relative overflow-hidden">
   <!--v-if-->
-  <div class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></div>
+  <div data-slot="logos" class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
 </div>"
 `;
 
 exports[`PageLogos > renders with marquee correctly 1`] = `
-"<div class="relative overflow-hidden">
+"<div data-slot="root" class="relative overflow-hidden">
   <!--v-if-->
-  <div data-orientation="horizontal" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden mt-10">
-    <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></div>
-    <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></div>
-    <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></div>
-    <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></div>
+  <div data-orientation="horizontal" data-slot="logos" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden mt-10">
+    <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
+    <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
+    <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
+    <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
   </div>
 </div>"
 `;
 
 exports[`PageLogos > renders with title correctly 1`] = `
-"<div class="relative overflow-hidden">
-  <h2 class="text-lg text-center font-semibold text-highlighted">Title</h2>
-  <div class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]">
+"<div data-slot="root" class="relative overflow-hidden">
+  <h2 data-slot="title" class="text-lg text-center font-semibold text-highlighted">Title</h2>
+  <div data-slot="logos" class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`PageLogos > renders with ui correctly 1`] = `
-"<div class="relative overflow-hidden">
+"<div data-slot="root" class="relative overflow-hidden">
   <!--v-if-->
-  <div class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]">
+  <div data-slot="logos" class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]">
     <!--v-if-->
   </div>
 </div>"
diff --git a/test/components/__snapshots__/PageLogos.spec.ts.snap b/test/components/__snapshots__/PageLogos.spec.ts.snap
index ba56104a1f..927dc56211 100644
--- a/test/components/__snapshots__/PageLogos.spec.ts.snap
+++ b/test/components/__snapshots__/PageLogos.spec.ts.snap
@@ -1,69 +1,69 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PageLogos > renders with as correctly 1`] = `
-"<section class="relative overflow-hidden">
+"<section data-slot="root" class="relative overflow-hidden">
   <!--v-if-->
-  <div class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]">
+  <div data-slot="logos" class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]">
     <!--v-if-->
   </div>
 </section>"
 `;
 
 exports[`PageLogos > renders with class correctly 1`] = `
-"<div class="relative overflow-hidden text-xl">
+"<div data-slot="root" class="relative overflow-hidden text-xl">
   <!--v-if-->
-  <div class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]">
+  <div data-slot="logos" class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`PageLogos > renders with default slot correctly 1`] = `
-"<div class="relative overflow-hidden">
+"<div data-slot="root" class="relative overflow-hidden">
   <!--v-if-->
-  <div class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]">Default slot</div>
+  <div data-slot="logos" class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]">Default slot</div>
 </div>"
 `;
 
 exports[`PageLogos > renders with default slot correctly 2`] = `
-"<div class="relative overflow-hidden">
+"<div data-slot="root" class="relative overflow-hidden">
   <!--v-if-->
-  <div class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]">Default slot</div>
+  <div data-slot="logos" class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]">Default slot</div>
 </div>"
 `;
 
 exports[`PageLogos > renders with items correctly 1`] = `
-"<div class="relative overflow-hidden">
+"<div data-slot="root" class="relative overflow-hidden">
   <!--v-if-->
-  <div class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></div>
+  <div data-slot="logos" class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
 </div>"
 `;
 
 exports[`PageLogos > renders with marquee correctly 1`] = `
-"<div class="relative overflow-hidden">
+"<div data-slot="root" class="relative overflow-hidden">
   <!--v-if-->
-  <div data-orientation="horizontal" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden mt-10">
-    <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></div>
-    <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></div>
-    <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></div>
-    <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></div>
+  <div data-orientation="horizontal" data-slot="logos" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden mt-10">
+    <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
+    <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
+    <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
+    <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
   </div>
 </div>"
 `;
 
 exports[`PageLogos > renders with title correctly 1`] = `
-"<div class="relative overflow-hidden">
-  <h2 class="text-lg text-center font-semibold text-highlighted">Title</h2>
-  <div class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]">
+"<div data-slot="root" class="relative overflow-hidden">
+  <h2 data-slot="title" class="text-lg text-center font-semibold text-highlighted">Title</h2>
+  <div data-slot="logos" class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`PageLogos > renders with ui correctly 1`] = `
-"<div class="relative overflow-hidden">
+"<div data-slot="root" class="relative overflow-hidden">
   <!--v-if-->
-  <div class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]">
+  <div data-slot="logos" class="mt-10 flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]">
     <!--v-if-->
   </div>
 </div>"
diff --git a/test/components/__snapshots__/PageSection-vue.spec.ts.snap b/test/components/__snapshots__/PageSection-vue.spec.ts.snap
index 21427b6172..26295f830e 100644
--- a/test/components/__snapshots__/PageSection-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PageSection-vue.spec.ts.snap
@@ -1,17 +1,17 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PageSection > renders with as correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16"></div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container"></div>
 </div>"
 `;
 
 exports[`PageSection > renders with body slot correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
-      <div class="mt-8">Body slot</div>
+      <div data-slot="body" class="mt-8">Body slot</div>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -20,34 +20,34 @@ exports[`PageSection > renders with body slot correctly 1`] = `
 `;
 
 exports[`PageSection > renders with bottom slot correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16"></div>Bottom slot
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container"></div>Bottom slot
 </section>"
 `;
 
 exports[`PageSection > renders with class correctly 1`] = `
-"<section data-orientation="vertical" class="isolate absolute">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16"></div>
+"<section data-orientation="vertical" data-slot="root" class="isolate absolute">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container"></div>
 </section>"
 `;
 
 exports[`PageSection > renders with default slot correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
     <!--v-if-->Default slot
   </div>
 </section>"
 `;
 
 exports[`PageSection > renders with description correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <div class="text-base sm:text-lg text-muted text-center text-balance">Description</div>
+        <div data-slot="description" class="text-base sm:text-lg text-muted text-center text-balance">Description</div>
       </div>
       <!--v-if-->
       <!--v-if-->
@@ -58,14 +58,14 @@ exports[`PageSection > renders with description correctly 1`] = `
 `;
 
 exports[`PageSection > renders with description slot correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <div class="text-base sm:text-lg text-muted text-center text-balance">Description slot</div>
+        <div data-slot="description" class="text-base sm:text-lg text-muted text-center text-balance">Description slot</div>
       </div>
       <!--v-if-->
       <!--v-if-->
@@ -76,23 +76,23 @@ exports[`PageSection > renders with description slot correctly 1`] = `
 `;
 
 exports[`PageSection > renders with features and description correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <div class="text-base sm:text-lg text-muted text-center text-balance">Description</div>
+        <div data-slot="description" class="text-base sm:text-lg text-muted text-center text-balance">Description</div>
       </div>
-      <div class="mt-16">
-        <ul class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
-          <li data-orientation="horizontal" class="relative flex items-start gap-2.5">
-            <div class="inline-flex items-center justify-center p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-            <div class="">
+      <div data-slot="body" class="mt-16">
+        <ul data-slot="features" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
+          <li data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
+            <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+            <div data-slot="wrapper" class="">
               <!--v-if-->
-              <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-              <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+              <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+              <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
             </div>
           </li>
         </ul>
@@ -105,23 +105,23 @@ exports[`PageSection > renders with features and description correctly 1`] = `
 `;
 
 exports[`PageSection > renders with features and title correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
         <!--v-if-->
         <!--v-if-->
-        <h2 class="text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted text-center">Title</h2>
+        <h2 data-slot="title" class="text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted text-center">Title</h2>
         <!--v-if-->
       </div>
-      <div class="mt-16">
-        <ul class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
-          <li data-orientation="horizontal" class="relative flex items-start gap-2.5">
-            <div class="inline-flex items-center justify-center p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-            <div class="">
+      <div data-slot="body" class="mt-16">
+        <ul data-slot="features" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
+          <li data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
+            <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+            <div data-slot="wrapper" class="">
               <!--v-if-->
-              <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-              <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+              <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+              <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
             </div>
           </li>
         </ul>
@@ -134,18 +134,18 @@ exports[`PageSection > renders with features and title correctly 1`] = `
 `;
 
 exports[`PageSection > renders with features correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
-      <!--v-if-->
-      <div class="mt-8">
-        <ul class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
-          <li data-orientation="horizontal" class="relative flex items-start gap-2.5">
-            <div class="inline-flex items-center justify-center p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-            <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <!--v-if-->
+      <div data-slot="body" class="mt-8">
+        <ul data-slot="features" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
+          <li data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
+            <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+            <div data-slot="wrapper" class="">
               <!--v-if-->
-              <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-              <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+              <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+              <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
             </div>
           </li>
         </ul>
@@ -158,12 +158,12 @@ exports[`PageSection > renders with features correctly 1`] = `
 `;
 
 exports[`PageSection > renders with features slot correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
-      <div class="mt-8">
-        <ul class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">Features slot</ul>
+      <div data-slot="body" class="mt-8">
+        <ul data-slot="features" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">Features slot</ul>
       </div>
       <!--v-if-->
     </div>
@@ -173,12 +173,12 @@ exports[`PageSection > renders with features slot correctly 1`] = `
 `;
 
 exports[`PageSection > renders with footer slot correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-      <div class="mt-8">Footer slot</div>
+      <div data-slot="footer" class="mt-8">Footer slot</div>
     </div>
     <!--v-if-->
   </div>
@@ -186,10 +186,10 @@ exports[`PageSection > renders with footer slot correctly 1`] = `
 `;
 
 exports[`PageSection > renders with header slot correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">Header slot</div>
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">Header slot</div>
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -199,12 +199,12 @@ exports[`PageSection > renders with header slot correctly 1`] = `
 `;
 
 exports[`PageSection > renders with headline correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
         <!--v-if-->
-        <div class="mb-3 justify-center font-semibold text-primary flex items-center gap-1.5">Headline</div>
+        <div data-slot="headline" class="mb-3 justify-center font-semibold text-primary flex items-center gap-1.5">Headline</div>
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -217,12 +217,12 @@ exports[`PageSection > renders with headline correctly 1`] = `
 `;
 
 exports[`PageSection > renders with headline slot correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
         <!--v-if-->
-        <div class="mb-3 justify-center">Headline slot</div>
+        <div data-slot="headline" class="mb-3 justify-center">Headline slot</div>
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -235,11 +235,11 @@ exports[`PageSection > renders with headline slot correctly 1`] = `
 `;
 
 exports[`PageSection > renders with icon correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
-        <div class="flex items-center mb-6 justify-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-10 shrink-0 text-primary"></svg></div>
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
+        <div data-slot="leading" class="flex items-center mb-6 justify-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-10 shrink-0 text-primary"></svg></div>
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
@@ -253,11 +253,11 @@ exports[`PageSection > renders with icon correctly 1`] = `
 `;
 
 exports[`PageSection > renders with leading slot correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
-        <div class="flex items-center mb-6 justify-center">Leading slot</div>
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
+        <div data-slot="leading" class="flex items-center mb-6 justify-center">Leading slot</div>
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
@@ -271,25 +271,25 @@ exports[`PageSection > renders with leading slot correctly 1`] = `
 `;
 
 exports[`PageSection > renders with links and features correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
-      <!--v-if-->
-      <div class="mt-8">
-        <ul class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
-          <li data-orientation="horizontal" class="relative flex items-start gap-2.5">
-            <div class="inline-flex items-center justify-center p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-            <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <!--v-if-->
+      <div data-slot="body" class="mt-8">
+        <ul data-slot="features" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
+          <li data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
+            <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+            <div data-slot="wrapper" class="">
               <!--v-if-->
-              <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-              <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+              <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+              <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
             </div>
           </li>
         </ul>
       </div>
-      <div class="mt-16">
-        <div class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-            <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="footer" class="mt-16">
+        <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
       </div>
@@ -300,14 +300,14 @@ exports[`PageSection > renders with links and features correctly 1`] = `
 `;
 
 exports[`PageSection > renders with links correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-      <div class="mt-8">
-        <div class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-            <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="footer" class="mt-8">
+        <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
       </div>
@@ -318,13 +318,13 @@ exports[`PageSection > renders with links correctly 1`] = `
 `;
 
 exports[`PageSection > renders with links slot correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-      <div class="mt-8">
-        <div class="flex flex-wrap gap-x-6 gap-y-3 justify-center">Links slot</div>
+      <div data-slot="footer" class="mt-8">
+        <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center">Links slot</div>
       </div>
     </div>
     <!--v-if-->
@@ -333,8 +333,8 @@ exports[`PageSection > renders with links slot correctly 1`] = `
 `;
 
 exports[`PageSection > renders with orientation horizontal correctly 1`] = `
-"<section data-orientation="horizontal" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center">
+"<section data-orientation="horizontal" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center" data-slot="container">
     <!--v-if-->
     <div class="hidden lg:block"></div>
   </div>
@@ -342,18 +342,18 @@ exports[`PageSection > renders with orientation horizontal correctly 1`] = `
 `;
 
 exports[`PageSection > renders with orientation horizontal features correctly 1`] = `
-"<section data-orientation="horizontal" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center">
-    <div class="">
-      <!--v-if-->
-      <div class="mt-8">
-        <ul class="grid gap-4">
-          <li data-orientation="horizontal" class="relative flex items-start gap-2.5">
-            <div class="inline-flex items-center justify-center p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-            <div class="">
+"<section data-orientation="horizontal" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <!--v-if-->
+      <div data-slot="body" class="mt-8">
+        <ul data-slot="features" class="grid gap-4">
+          <li data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
+            <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="size-5 shrink-0 text-primary"></svg></div>
+            <div data-slot="wrapper" class="">
               <!--v-if-->
-              <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-              <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+              <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+              <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
             </div>
           </li>
         </ul>
@@ -366,14 +366,14 @@ exports[`PageSection > renders with orientation horizontal features correctly 1`
 `;
 
 exports[`PageSection > renders with orientation horizontal links correctly 1`] = `
-"<section data-orientation="horizontal" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center">
-    <div class="">
+"<section data-orientation="horizontal" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center" data-slot="container">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-      <div class="mt-8">
-        <div class="flex flex-wrap gap-x-6 gap-y-3"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-            <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="footer" class="mt-8">
+        <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
       </div>
@@ -384,8 +384,8 @@ exports[`PageSection > renders with orientation horizontal links correctly 1`] =
 `;
 
 exports[`PageSection > renders with orientation horizontal reverse correctly 1`] = `
-"<section data-orientation="horizontal" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center">
+"<section data-orientation="horizontal" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center" data-slot="container">
     <!--v-if-->
     <div class="hidden lg:block"></div>
   </div>
@@ -393,19 +393,19 @@ exports[`PageSection > renders with orientation horizontal reverse correctly 1`]
 `;
 
 exports[`PageSection > renders with reverse correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16"></div>
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container"></div>
 </section>"
 `;
 
 exports[`PageSection > renders with title correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
         <!--v-if-->
         <!--v-if-->
-        <h2 class="text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted text-center">Title</h2>
+        <h2 data-slot="title" class="text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted text-center">Title</h2>
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -417,13 +417,13 @@ exports[`PageSection > renders with title correctly 1`] = `
 `;
 
 exports[`PageSection > renders with title slot correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
         <!--v-if-->
         <!--v-if-->
-        <h2 class="text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted text-center">Title slot</h2>
+        <h2 data-slot="title" class="text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted text-center">Title slot</h2>
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -435,12 +435,12 @@ exports[`PageSection > renders with title slot correctly 1`] = `
 `;
 
 exports[`PageSection > renders with top slot correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">Top slot<div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16"></div>
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">Top slot<div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container"></div>
 </section>"
 `;
 
 exports[`PageSection > renders with ui correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16 max-w-5xl"></div>
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16 max-w-5xl" data-slot="container"></div>
 </section>"
 `;
diff --git a/test/components/__snapshots__/PageSection.spec.ts.snap b/test/components/__snapshots__/PageSection.spec.ts.snap
index a17a16593a..acde331883 100644
--- a/test/components/__snapshots__/PageSection.spec.ts.snap
+++ b/test/components/__snapshots__/PageSection.spec.ts.snap
@@ -1,17 +1,17 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PageSection > renders with as correctly 1`] = `
-"<div data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16"></div>
+"<div data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container"></div>
 </div>"
 `;
 
 exports[`PageSection > renders with body slot correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
-      <div class="mt-8">Body slot</div>
+      <div data-slot="body" class="mt-8">Body slot</div>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -20,34 +20,34 @@ exports[`PageSection > renders with body slot correctly 1`] = `
 `;
 
 exports[`PageSection > renders with bottom slot correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16"></div>Bottom slot
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container"></div>Bottom slot
 </section>"
 `;
 
 exports[`PageSection > renders with class correctly 1`] = `
-"<section data-orientation="vertical" class="isolate absolute">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16"></div>
+"<section data-orientation="vertical" data-slot="root" class="isolate absolute">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container"></div>
 </section>"
 `;
 
 exports[`PageSection > renders with default slot correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
     <!--v-if-->Default slot
   </div>
 </section>"
 `;
 
 exports[`PageSection > renders with description correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <div class="text-base sm:text-lg text-muted text-center text-balance">Description</div>
+        <div data-slot="description" class="text-base sm:text-lg text-muted text-center text-balance">Description</div>
       </div>
       <!--v-if-->
       <!--v-if-->
@@ -58,14 +58,14 @@ exports[`PageSection > renders with description correctly 1`] = `
 `;
 
 exports[`PageSection > renders with description slot correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <div class="text-base sm:text-lg text-muted text-center text-balance">Description slot</div>
+        <div data-slot="description" class="text-base sm:text-lg text-muted text-center text-balance">Description slot</div>
       </div>
       <!--v-if-->
       <!--v-if-->
@@ -76,23 +76,23 @@ exports[`PageSection > renders with description slot correctly 1`] = `
 `;
 
 exports[`PageSection > renders with features and description correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
-        <div class="text-base sm:text-lg text-muted text-center text-balance">Description</div>
+        <div data-slot="description" class="text-base sm:text-lg text-muted text-center text-balance">Description</div>
       </div>
-      <div class="mt-16">
-        <ul class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
-          <li data-orientation="horizontal" class="relative flex items-start gap-2.5">
-            <div class="inline-flex items-center justify-center p-0.5"><span class="iconify i-lucide:check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-            <div class="">
+      <div data-slot="body" class="mt-16">
+        <ul data-slot="features" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
+          <li data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
+            <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><span class="iconify i-lucide:check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+            <div data-slot="wrapper" class="">
               <!--v-if-->
-              <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-              <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+              <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+              <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
             </div>
           </li>
         </ul>
@@ -105,23 +105,23 @@ exports[`PageSection > renders with features and description correctly 1`] = `
 `;
 
 exports[`PageSection > renders with features and title correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
         <!--v-if-->
         <!--v-if-->
-        <h2 class="text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted text-center">Title</h2>
+        <h2 data-slot="title" class="text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted text-center">Title</h2>
         <!--v-if-->
       </div>
-      <div class="mt-16">
-        <ul class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
-          <li data-orientation="horizontal" class="relative flex items-start gap-2.5">
-            <div class="inline-flex items-center justify-center p-0.5"><span class="iconify i-lucide:check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-            <div class="">
+      <div data-slot="body" class="mt-16">
+        <ul data-slot="features" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
+          <li data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
+            <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><span class="iconify i-lucide:check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+            <div data-slot="wrapper" class="">
               <!--v-if-->
-              <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-              <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+              <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+              <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
             </div>
           </li>
         </ul>
@@ -134,18 +134,18 @@ exports[`PageSection > renders with features and title correctly 1`] = `
 `;
 
 exports[`PageSection > renders with features correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
-      <!--v-if-->
-      <div class="mt-8">
-        <ul class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
-          <li data-orientation="horizontal" class="relative flex items-start gap-2.5">
-            <div class="inline-flex items-center justify-center p-0.5"><span class="iconify i-lucide:check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-            <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <!--v-if-->
+      <div data-slot="body" class="mt-8">
+        <ul data-slot="features" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
+          <li data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
+            <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><span class="iconify i-lucide:check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+            <div data-slot="wrapper" class="">
               <!--v-if-->
-              <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-              <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+              <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+              <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
             </div>
           </li>
         </ul>
@@ -158,12 +158,12 @@ exports[`PageSection > renders with features correctly 1`] = `
 `;
 
 exports[`PageSection > renders with features slot correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
-      <div class="mt-8">
-        <ul class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">Features slot</ul>
+      <div data-slot="body" class="mt-8">
+        <ul data-slot="features" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">Features slot</ul>
       </div>
       <!--v-if-->
     </div>
@@ -173,12 +173,12 @@ exports[`PageSection > renders with features slot correctly 1`] = `
 `;
 
 exports[`PageSection > renders with footer slot correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-      <div class="mt-8">Footer slot</div>
+      <div data-slot="footer" class="mt-8">Footer slot</div>
     </div>
     <!--v-if-->
   </div>
@@ -186,10 +186,10 @@ exports[`PageSection > renders with footer slot correctly 1`] = `
 `;
 
 exports[`PageSection > renders with header slot correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">Header slot</div>
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">Header slot</div>
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -199,12 +199,12 @@ exports[`PageSection > renders with header slot correctly 1`] = `
 `;
 
 exports[`PageSection > renders with headline correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
         <!--v-if-->
-        <div class="mb-3 justify-center font-semibold text-primary flex items-center gap-1.5">Headline</div>
+        <div data-slot="headline" class="mb-3 justify-center font-semibold text-primary flex items-center gap-1.5">Headline</div>
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -217,12 +217,12 @@ exports[`PageSection > renders with headline correctly 1`] = `
 `;
 
 exports[`PageSection > renders with headline slot correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
         <!--v-if-->
-        <div class="mb-3 justify-center">Headline slot</div>
+        <div data-slot="headline" class="mb-3 justify-center">Headline slot</div>
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -235,11 +235,11 @@ exports[`PageSection > renders with headline slot correctly 1`] = `
 `;
 
 exports[`PageSection > renders with icon correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
-        <div class="flex items-center mb-6 justify-center"><span class="iconify i-lucide:house size-10 shrink-0 text-primary" aria-hidden="true"></span></div>
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
+        <div data-slot="leading" class="flex items-center mb-6 justify-center"><span class="iconify i-lucide:house size-10 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
@@ -253,11 +253,11 @@ exports[`PageSection > renders with icon correctly 1`] = `
 `;
 
 exports[`PageSection > renders with leading slot correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
-        <div class="flex items-center mb-6 justify-center">Leading slot</div>
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
+        <div data-slot="leading" class="flex items-center mb-6 justify-center">Leading slot</div>
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
@@ -271,25 +271,25 @@ exports[`PageSection > renders with leading slot correctly 1`] = `
 `;
 
 exports[`PageSection > renders with links and features correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
-      <!--v-if-->
-      <div class="mt-8">
-        <ul class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
-          <li data-orientation="horizontal" class="relative flex items-start gap-2.5">
-            <div class="inline-flex items-center justify-center p-0.5"><span class="iconify i-lucide:check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-            <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <!--v-if-->
+      <div data-slot="body" class="mt-8">
+        <ul data-slot="features" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
+          <li data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
+            <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><span class="iconify i-lucide:check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+            <div data-slot="wrapper" class="">
               <!--v-if-->
-              <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-              <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+              <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+              <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
             </div>
           </li>
         </ul>
       </div>
-      <div class="mt-16">
-        <div class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-            <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="footer" class="mt-16">
+        <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
       </div>
@@ -300,14 +300,14 @@ exports[`PageSection > renders with links and features correctly 1`] = `
 `;
 
 exports[`PageSection > renders with links correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-      <div class="mt-8">
-        <div class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-            <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="footer" class="mt-8">
+        <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
       </div>
@@ -318,13 +318,13 @@ exports[`PageSection > renders with links correctly 1`] = `
 `;
 
 exports[`PageSection > renders with links slot correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-      <div class="mt-8">
-        <div class="flex flex-wrap gap-x-6 gap-y-3 justify-center">Links slot</div>
+      <div data-slot="footer" class="mt-8">
+        <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center">Links slot</div>
       </div>
     </div>
     <!--v-if-->
@@ -333,8 +333,8 @@ exports[`PageSection > renders with links slot correctly 1`] = `
 `;
 
 exports[`PageSection > renders with orientation horizontal correctly 1`] = `
-"<section data-orientation="horizontal" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center">
+"<section data-orientation="horizontal" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center" data-slot="container">
     <!--v-if-->
     <div class="hidden lg:block"></div>
   </div>
@@ -342,18 +342,18 @@ exports[`PageSection > renders with orientation horizontal correctly 1`] = `
 `;
 
 exports[`PageSection > renders with orientation horizontal features correctly 1`] = `
-"<section data-orientation="horizontal" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center">
-    <div class="">
-      <!--v-if-->
-      <div class="mt-8">
-        <ul class="grid gap-4">
-          <li data-orientation="horizontal" class="relative flex items-start gap-2.5">
-            <div class="inline-flex items-center justify-center p-0.5"><span class="iconify i-lucide:check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-            <div class="">
+"<section data-orientation="horizontal" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <!--v-if-->
+      <div data-slot="body" class="mt-8">
+        <ul data-slot="features" class="grid gap-4">
+          <li data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
+            <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><span class="iconify i-lucide:check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="leadingIcon"></span></div>
+            <div data-slot="wrapper" class="">
               <!--v-if-->
-              <div class="text-base text-pretty font-semibold text-highlighted">Title</div>
-              <div class="text-[15px] text-pretty text-muted mt-1">Description</div>
+              <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
+              <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
             </div>
           </li>
         </ul>
@@ -366,14 +366,14 @@ exports[`PageSection > renders with orientation horizontal features correctly 1`
 `;
 
 exports[`PageSection > renders with orientation horizontal links correctly 1`] = `
-"<section data-orientation="horizontal" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center">
-    <div class="">
+"<section data-orientation="horizontal" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center" data-slot="container">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-      <div class="mt-8">
-        <div class="flex flex-wrap gap-x-6 gap-y-3"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-            <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="footer" class="mt-8">
+        <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
             <!--v-if-->
           </button></div>
       </div>
@@ -384,8 +384,8 @@ exports[`PageSection > renders with orientation horizontal links correctly 1`] =
 `;
 
 exports[`PageSection > renders with orientation horizontal reverse correctly 1`] = `
-"<section data-orientation="horizontal" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center">
+"<section data-orientation="horizontal" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center" data-slot="container">
     <!--v-if-->
     <div class="hidden lg:block"></div>
   </div>
@@ -393,19 +393,19 @@ exports[`PageSection > renders with orientation horizontal reverse correctly 1`]
 `;
 
 exports[`PageSection > renders with reverse correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16"></div>
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container"></div>
 </section>"
 `;
 
 exports[`PageSection > renders with title correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
         <!--v-if-->
         <!--v-if-->
-        <h2 class="text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted text-center">Title</h2>
+        <h2 data-slot="title" class="text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted text-center">Title</h2>
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -417,13 +417,13 @@ exports[`PageSection > renders with title correctly 1`] = `
 `;
 
 exports[`PageSection > renders with title slot correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16">
-    <div class="">
-      <div class="">
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
+    <div data-slot="wrapper" class="">
+      <div data-slot="header" class="">
         <!--v-if-->
         <!--v-if-->
-        <h2 class="text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted text-center">Title slot</h2>
+        <h2 data-slot="title" class="text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted text-center">Title slot</h2>
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -435,12 +435,12 @@ exports[`PageSection > renders with title slot correctly 1`] = `
 `;
 
 exports[`PageSection > renders with top slot correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">Top slot<div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16"></div>
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">Top slot<div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container"></div>
 </section>"
 `;
 
 exports[`PageSection > renders with ui correctly 1`] = `
-"<section data-orientation="vertical" class="relative isolate">
-  <div class="w-full mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16 max-w-5xl"></div>
+"<section data-orientation="vertical" data-slot="root" class="relative isolate">
+  <div class="w-full mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16 max-w-5xl" data-slot="container"></div>
 </section>"
 `;
diff --git a/test/components/__snapshots__/Pagination-vue.spec.ts.snap b/test/components/__snapshots__/Pagination-vue.spec.ts.snap
index 63b3c44561..f4a69ed5a2 100644
--- a/test/components/__snapshots__/Pagination-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Pagination-vue.spec.ts.snap
@@ -1,32 +1,32 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Pagination > renders with as correctly 1`] = `
-"<div>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<div data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -34,32 +34,32 @@ exports[`Pagination > renders with as correctly 1`] = `
 `;
 
 exports[`Pagination > renders with class correctly 1`] = `
-"<nav class="relative">
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root" class="relative">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -67,32 +67,32 @@ exports[`Pagination > renders with class correctly 1`] = `
 `;
 
 exports[`Pagination > renders with defaultPage correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -100,32 +100,32 @@ exports[`Pagination > renders with defaultPage correctly 1`] = `
 `;
 
 exports[`Pagination > renders with disabled correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" disabled="" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" disabled="" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" disabled="" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" disabled="" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" disabled="" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" disabled="" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" disabled="" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" disabled="" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" disabled="" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -133,32 +133,32 @@ exports[`Pagination > renders with disabled correctly 1`] = `
 `;
 
 exports[`Pagination > renders with ellipsis slot correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button>Ellipsis slot<button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button>Ellipsis slot<button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="6">
-      <!--v-if--><span class="truncate min-w-5 text-center">6</span>
+    </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="6">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
-    </button>Ellipsis slot<button type="button" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="10">
-      <!--v-if--><span class="truncate min-w-5 text-center">10</span>
+    </button>Ellipsis slot<button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="10">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -166,40 +166,40 @@ exports[`Pagination > renders with ellipsis slot correctly 1`] = `
 `;
 
 exports[`Pagination > renders with ellipsisIcon correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button>
-    <div data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </div><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="6">
-      <!--v-if--><span class="truncate min-w-5 text-center">6</span>
+    </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="6">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
     </button>
-    <div data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="10">
-      <!--v-if--><span class="truncate min-w-5 text-center">10</span>
+    </div><button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="10">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -208,29 +208,29 @@ exports[`Pagination > renders with ellipsisIcon correctly 1`] = `
 `;
 
 exports[`Pagination > renders with first slot correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1">First slot<button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1">First slot<button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -238,32 +238,32 @@ exports[`Pagination > renders with first slot correctly 1`] = `
 `;
 
 exports[`Pagination > renders with firstIcon correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -271,17 +271,17 @@ exports[`Pagination > renders with firstIcon correctly 1`] = `
 `;
 
 exports[`Pagination > renders with item slot correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button>Item slotItem slotItem slotItem slotItem slot<button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button>Item slotItem slotItem slotItem slotItem slot<button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -289,32 +289,32 @@ exports[`Pagination > renders with item slot correctly 1`] = `
 `;
 
 exports[`Pagination > renders with itemsPerPage correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -322,29 +322,29 @@ exports[`Pagination > renders with itemsPerPage correctly 1`] = `
 `;
 
 exports[`Pagination > renders with last slot correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>Last slot</div>
@@ -352,32 +352,32 @@ exports[`Pagination > renders with last slot correctly 1`] = `
 `;
 
 exports[`Pagination > renders with lastIcon correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -385,32 +385,32 @@ exports[`Pagination > renders with lastIcon correctly 1`] = `
 `;
 
 exports[`Pagination > renders with neutral active variant ghost correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -418,32 +418,32 @@ exports[`Pagination > renders with neutral active variant ghost correctly 1`] =
 `;
 
 exports[`Pagination > renders with neutral active variant link correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -451,32 +451,32 @@ exports[`Pagination > renders with neutral active variant link correctly 1`] = `
 `;
 
 exports[`Pagination > renders with neutral active variant outline correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -484,32 +484,32 @@ exports[`Pagination > renders with neutral active variant outline correctly 1`]
 `;
 
 exports[`Pagination > renders with neutral active variant soft correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -517,32 +517,32 @@ exports[`Pagination > renders with neutral active variant soft correctly 1`] = `
 `;
 
 exports[`Pagination > renders with neutral active variant solid correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -550,32 +550,32 @@ exports[`Pagination > renders with neutral active variant solid correctly 1`] =
 `;
 
 exports[`Pagination > renders with neutral active variant subtle correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -583,32 +583,32 @@ exports[`Pagination > renders with neutral active variant subtle correctly 1`] =
 `;
 
 exports[`Pagination > renders with neutral variant ghost correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -616,32 +616,32 @@ exports[`Pagination > renders with neutral variant ghost correctly 1`] = `
 `;
 
 exports[`Pagination > renders with neutral variant link correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -649,32 +649,32 @@ exports[`Pagination > renders with neutral variant link correctly 1`] = `
 `;
 
 exports[`Pagination > renders with neutral variant outline correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -682,32 +682,32 @@ exports[`Pagination > renders with neutral variant outline correctly 1`] = `
 `;
 
 exports[`Pagination > renders with neutral variant soft correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -715,32 +715,32 @@ exports[`Pagination > renders with neutral variant soft correctly 1`] = `
 `;
 
 exports[`Pagination > renders with neutral variant solid correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -748,32 +748,32 @@ exports[`Pagination > renders with neutral variant solid correctly 1`] = `
 `;
 
 exports[`Pagination > renders with neutral variant subtle correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -781,29 +781,29 @@ exports[`Pagination > renders with neutral variant subtle correctly 1`] = `
 `;
 
 exports[`Pagination > renders with next slot correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button>Next slot<button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button>Next slot<button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -811,32 +811,32 @@ exports[`Pagination > renders with next slot correctly 1`] = `
 `;
 
 exports[`Pagination > renders with nextIcon correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -844,32 +844,32 @@ exports[`Pagination > renders with nextIcon correctly 1`] = `
 `;
 
 exports[`Pagination > renders with page correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -877,29 +877,29 @@ exports[`Pagination > renders with page correctly 1`] = `
 `;
 
 exports[`Pagination > renders with prev slot correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button>Prev slot<button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button>Prev slot<button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -907,32 +907,32 @@ exports[`Pagination > renders with prev slot correctly 1`] = `
 `;
 
 exports[`Pagination > renders with prevIcon correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -940,32 +940,32 @@ exports[`Pagination > renders with prevIcon correctly 1`] = `
 `;
 
 exports[`Pagination > renders with primary active variant ghost correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -973,32 +973,32 @@ exports[`Pagination > renders with primary active variant ghost correctly 1`] =
 `;
 
 exports[`Pagination > renders with primary active variant link correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1006,32 +1006,32 @@ exports[`Pagination > renders with primary active variant link correctly 1`] = `
 `;
 
 exports[`Pagination > renders with primary active variant outline correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1039,32 +1039,32 @@ exports[`Pagination > renders with primary active variant outline correctly 1`]
 `;
 
 exports[`Pagination > renders with primary active variant soft correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1072,32 +1072,32 @@ exports[`Pagination > renders with primary active variant soft correctly 1`] = `
 `;
 
 exports[`Pagination > renders with primary active variant solid correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1105,32 +1105,32 @@ exports[`Pagination > renders with primary active variant solid correctly 1`] =
 `;
 
 exports[`Pagination > renders with primary active variant subtle correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1138,32 +1138,32 @@ exports[`Pagination > renders with primary active variant subtle correctly 1`] =
 `;
 
 exports[`Pagination > renders with primary variant ghost correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1171,32 +1171,32 @@ exports[`Pagination > renders with primary variant ghost correctly 1`] = `
 `;
 
 exports[`Pagination > renders with primary variant link correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1204,32 +1204,32 @@ exports[`Pagination > renders with primary variant link correctly 1`] = `
 `;
 
 exports[`Pagination > renders with primary variant outline correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1237,32 +1237,32 @@ exports[`Pagination > renders with primary variant outline correctly 1`] = `
 `;
 
 exports[`Pagination > renders with primary variant soft correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1270,32 +1270,32 @@ exports[`Pagination > renders with primary variant soft correctly 1`] = `
 `;
 
 exports[`Pagination > renders with primary variant solid correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1303,32 +1303,32 @@ exports[`Pagination > renders with primary variant solid correctly 1`] = `
 `;
 
 exports[`Pagination > renders with primary variant subtle correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1336,45 +1336,45 @@ exports[`Pagination > renders with primary variant subtle correctly 1`] = `
 `;
 
 exports[`Pagination > renders with showEdges correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="6">
-      <!--v-if--><span class="truncate min-w-5 text-center">6</span>
+    </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="6">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 7" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="7">
-      <!--v-if--><span class="truncate min-w-5 text-center">7</span>
+    </button><button type="button" data-type="page" aria-label="Page 7" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="7">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">7</span>
       <!--v-if-->
     </button>
-    <div data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="10">
-      <!--v-if--><span class="truncate min-w-5 text-center">10</span>
+    </div><button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="10">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1383,40 +1383,40 @@ exports[`Pagination > renders with showEdges correctly 1`] = `
 `;
 
 exports[`Pagination > renders with siblingCount correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button>
-    <div data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </div><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="6">
-      <!--v-if--><span class="truncate min-w-5 text-center">6</span>
+    </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="6">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
     </button>
-    <div data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="10">
-      <!--v-if--><span class="truncate min-w-5 text-center">10</span>
+    </div><button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="10">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1425,32 +1425,32 @@ exports[`Pagination > renders with siblingCount correctly 1`] = `
 `;
 
 exports[`Pagination > renders with size lg correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-2" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-2" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1458,32 +1458,32 @@ exports[`Pagination > renders with size lg correctly 1`] = `
 `;
 
 exports[`Pagination > renders with size md correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1491,32 +1491,32 @@ exports[`Pagination > renders with size md correctly 1`] = `
 `;
 
 exports[`Pagination > renders with size sm correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1524,32 +1524,32 @@ exports[`Pagination > renders with size sm correctly 1`] = `
 `;
 
 exports[`Pagination > renders with size xl correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-6"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-6"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-2" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-2" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-6"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-6"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1557,32 +1557,32 @@ exports[`Pagination > renders with size xl correctly 1`] = `
 `;
 
 exports[`Pagination > renders with size xs correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1590,32 +1590,32 @@ exports[`Pagination > renders with size xs correctly 1`] = `
 `;
 
 exports[`Pagination > renders with total correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1623,32 +1623,32 @@ exports[`Pagination > renders with total correctly 1`] = `
 `;
 
 exports[`Pagination > renders with ui correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-3"><button type="button" disabled="" aria-label="First Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-3"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5 rounded-full" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5 rounded-full" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1656,23 +1656,23 @@ exports[`Pagination > renders with ui correctly 1`] = `
 `;
 
 exports[`Pagination > renders without showControls correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1">
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1">
     <!--v-if-->
-    <!--v-if--><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    <!--v-if--><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button>
     <!--v-if-->
diff --git a/test/components/__snapshots__/Pagination.spec.ts.snap b/test/components/__snapshots__/Pagination.spec.ts.snap
index 6bc7b8b4b2..8541bcfee1 100644
--- a/test/components/__snapshots__/Pagination.spec.ts.snap
+++ b/test/components/__snapshots__/Pagination.spec.ts.snap
@@ -1,32 +1,32 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Pagination > renders with as correctly 1`] = `
-"<div>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<div data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -34,32 +34,32 @@ exports[`Pagination > renders with as correctly 1`] = `
 `;
 
 exports[`Pagination > renders with class correctly 1`] = `
-"<nav class="relative">
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root" class="relative">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -67,32 +67,32 @@ exports[`Pagination > renders with class correctly 1`] = `
 `;
 
 exports[`Pagination > renders with defaultPage correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -100,32 +100,32 @@ exports[`Pagination > renders with defaultPage correctly 1`] = `
 `;
 
 exports[`Pagination > renders with disabled correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" disabled="" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" disabled="" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" disabled="" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" disabled="" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" disabled="" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" disabled="" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" disabled="" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" disabled="" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" disabled="" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -133,32 +133,32 @@ exports[`Pagination > renders with disabled correctly 1`] = `
 `;
 
 exports[`Pagination > renders with ellipsis slot correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button>Ellipsis slot<button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button>Ellipsis slot<button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="6">
-      <!--v-if--><span class="truncate min-w-5 text-center">6</span>
+    </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="6">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
-    </button>Ellipsis slot<button type="button" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="10">
-      <!--v-if--><span class="truncate min-w-5 text-center">10</span>
+    </button>Ellipsis slot<button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="10">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -166,40 +166,40 @@ exports[`Pagination > renders with ellipsis slot correctly 1`] = `
 `;
 
 exports[`Pagination > renders with ellipsisIcon correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button>
-    <div data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
+    <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </div><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="6">
-      <!--v-if--><span class="truncate min-w-5 text-center">6</span>
+    </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="6">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
     </button>
-    <div data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
+    <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="10">
-      <!--v-if--><span class="truncate min-w-5 text-center">10</span>
+    </div><button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="10">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -208,29 +208,29 @@ exports[`Pagination > renders with ellipsisIcon correctly 1`] = `
 `;
 
 exports[`Pagination > renders with first slot correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1">First slot<button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1">First slot<button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -238,32 +238,32 @@ exports[`Pagination > renders with first slot correctly 1`] = `
 `;
 
 exports[`Pagination > renders with firstIcon correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -271,17 +271,17 @@ exports[`Pagination > renders with firstIcon correctly 1`] = `
 `;
 
 exports[`Pagination > renders with item slot correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button>Item slotItem slotItem slotItem slotItem slot<button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button>Item slotItem slotItem slotItem slotItem slot<button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -289,32 +289,32 @@ exports[`Pagination > renders with item slot correctly 1`] = `
 `;
 
 exports[`Pagination > renders with itemsPerPage correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -322,29 +322,29 @@ exports[`Pagination > renders with itemsPerPage correctly 1`] = `
 `;
 
 exports[`Pagination > renders with last slot correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>Last slot</div>
@@ -352,32 +352,32 @@ exports[`Pagination > renders with last slot correctly 1`] = `
 `;
 
 exports[`Pagination > renders with lastIcon correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -385,32 +385,32 @@ exports[`Pagination > renders with lastIcon correctly 1`] = `
 `;
 
 exports[`Pagination > renders with neutral active variant ghost correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -418,32 +418,32 @@ exports[`Pagination > renders with neutral active variant ghost correctly 1`] =
 `;
 
 exports[`Pagination > renders with neutral active variant link correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -451,32 +451,32 @@ exports[`Pagination > renders with neutral active variant link correctly 1`] = `
 `;
 
 exports[`Pagination > renders with neutral active variant outline correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -484,32 +484,32 @@ exports[`Pagination > renders with neutral active variant outline correctly 1`]
 `;
 
 exports[`Pagination > renders with neutral active variant soft correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -517,32 +517,32 @@ exports[`Pagination > renders with neutral active variant soft correctly 1`] = `
 `;
 
 exports[`Pagination > renders with neutral active variant solid correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -550,32 +550,32 @@ exports[`Pagination > renders with neutral active variant solid correctly 1`] =
 `;
 
 exports[`Pagination > renders with neutral active variant subtle correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -583,32 +583,32 @@ exports[`Pagination > renders with neutral active variant subtle correctly 1`] =
 `;
 
 exports[`Pagination > renders with neutral variant ghost correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -616,32 +616,32 @@ exports[`Pagination > renders with neutral variant ghost correctly 1`] = `
 `;
 
 exports[`Pagination > renders with neutral variant link correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -649,32 +649,32 @@ exports[`Pagination > renders with neutral variant link correctly 1`] = `
 `;
 
 exports[`Pagination > renders with neutral variant outline correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -682,32 +682,32 @@ exports[`Pagination > renders with neutral variant outline correctly 1`] = `
 `;
 
 exports[`Pagination > renders with neutral variant soft correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -715,32 +715,32 @@ exports[`Pagination > renders with neutral variant soft correctly 1`] = `
 `;
 
 exports[`Pagination > renders with neutral variant solid correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -748,32 +748,32 @@ exports[`Pagination > renders with neutral variant solid correctly 1`] = `
 `;
 
 exports[`Pagination > renders with neutral variant subtle correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -781,29 +781,29 @@ exports[`Pagination > renders with neutral variant subtle correctly 1`] = `
 `;
 
 exports[`Pagination > renders with next slot correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button>Next slot<button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button>Next slot<button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -811,32 +811,32 @@ exports[`Pagination > renders with next slot correctly 1`] = `
 `;
 
 exports[`Pagination > renders with nextIcon correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -844,32 +844,32 @@ exports[`Pagination > renders with nextIcon correctly 1`] = `
 `;
 
 exports[`Pagination > renders with page correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -877,29 +877,29 @@ exports[`Pagination > renders with page correctly 1`] = `
 `;
 
 exports[`Pagination > renders with prev slot correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button>Prev slot<button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button>Prev slot<button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -907,32 +907,32 @@ exports[`Pagination > renders with prev slot correctly 1`] = `
 `;
 
 exports[`Pagination > renders with prevIcon correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -940,32 +940,32 @@ exports[`Pagination > renders with prevIcon correctly 1`] = `
 `;
 
 exports[`Pagination > renders with primary active variant ghost correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -973,32 +973,32 @@ exports[`Pagination > renders with primary active variant ghost correctly 1`] =
 `;
 
 exports[`Pagination > renders with primary active variant link correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1006,32 +1006,32 @@ exports[`Pagination > renders with primary active variant link correctly 1`] = `
 `;
 
 exports[`Pagination > renders with primary active variant outline correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1039,32 +1039,32 @@ exports[`Pagination > renders with primary active variant outline correctly 1`]
 `;
 
 exports[`Pagination > renders with primary active variant soft correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1072,32 +1072,32 @@ exports[`Pagination > renders with primary active variant soft correctly 1`] = `
 `;
 
 exports[`Pagination > renders with primary active variant solid correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1105,32 +1105,32 @@ exports[`Pagination > renders with primary active variant solid correctly 1`] =
 `;
 
 exports[`Pagination > renders with primary active variant subtle correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1138,32 +1138,32 @@ exports[`Pagination > renders with primary active variant subtle correctly 1`] =
 `;
 
 exports[`Pagination > renders with primary variant ghost correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1171,32 +1171,32 @@ exports[`Pagination > renders with primary variant ghost correctly 1`] = `
 `;
 
 exports[`Pagination > renders with primary variant link correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1204,32 +1204,32 @@ exports[`Pagination > renders with primary variant link correctly 1`] = `
 `;
 
 exports[`Pagination > renders with primary variant outline correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1237,32 +1237,32 @@ exports[`Pagination > renders with primary variant outline correctly 1`] = `
 `;
 
 exports[`Pagination > renders with primary variant soft correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1270,32 +1270,32 @@ exports[`Pagination > renders with primary variant soft correctly 1`] = `
 `;
 
 exports[`Pagination > renders with primary variant solid correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1303,32 +1303,32 @@ exports[`Pagination > renders with primary variant solid correctly 1`] = `
 `;
 
 exports[`Pagination > renders with primary variant subtle correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1336,45 +1336,45 @@ exports[`Pagination > renders with primary variant subtle correctly 1`] = `
 `;
 
 exports[`Pagination > renders with showEdges correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="6">
-      <!--v-if--><span class="truncate min-w-5 text-center">6</span>
+    </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="6">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 7" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="7">
-      <!--v-if--><span class="truncate min-w-5 text-center">7</span>
+    </button><button type="button" data-type="page" aria-label="Page 7" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="7">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">7</span>
       <!--v-if-->
     </button>
-    <div data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis shrink-0 size-5" aria-hidden="true"></span>
+    <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="10">
-      <!--v-if--><span class="truncate min-w-5 text-center">10</span>
+    </div><button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="10">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1383,40 +1383,40 @@ exports[`Pagination > renders with showEdges correctly 1`] = `
 `;
 
 exports[`Pagination > renders with siblingCount correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
     </button>
-    <div data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis shrink-0 size-5" aria-hidden="true"></span>
+    <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </div><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="6">
-      <!--v-if--><span class="truncate min-w-5 text-center">6</span>
+    </button><button type="button" data-type="page" aria-label="Page 6" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="6">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">6</span>
       <!--v-if-->
     </button>
-    <div data-type="ellipsis" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis shrink-0 size-5" aria-hidden="true"></span>
+    <div data-type="ellipsis" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 pointer-events-none"><span class="iconify i-lucide:ellipsis shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="10">
-      <!--v-if--><span class="truncate min-w-5 text-center">10</span>
+    </div><button type="button" data-type="page" aria-label="Page 10" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="10">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">10</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1425,32 +1425,32 @@ exports[`Pagination > renders with siblingCount correctly 1`] = `
 `;
 
 exports[`Pagination > renders with size lg correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-2" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-2" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1458,32 +1458,32 @@ exports[`Pagination > renders with size lg correctly 1`] = `
 `;
 
 exports[`Pagination > renders with size md correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1491,32 +1491,32 @@ exports[`Pagination > renders with size md correctly 1`] = `
 `;
 
 exports[`Pagination > renders with size sm correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1524,32 +1524,32 @@ exports[`Pagination > renders with size sm correctly 1`] = `
 `;
 
 exports[`Pagination > renders with size xl correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-6" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-6" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-2" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-2" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-6" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1557,32 +1557,32 @@ exports[`Pagination > renders with size xl correctly 1`] = `
 `;
 
 exports[`Pagination > renders with size xs correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1590,32 +1590,32 @@ exports[`Pagination > renders with size xs correctly 1`] = `
 `;
 
 exports[`Pagination > renders with total correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1623,32 +1623,32 @@ exports[`Pagination > renders with total correctly 1`] = `
 `;
 
 exports[`Pagination > renders with ui correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-3"><button type="button" disabled="" aria-label="First Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-3"><button type="button" disabled="" aria-label="First Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5 rounded-full" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5 rounded-full" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5 rounded-full"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -1656,23 +1656,23 @@ exports[`Pagination > renders with ui correctly 1`] = `
 `;
 
 exports[`Pagination > renders without showControls correctly 1`] = `
-"<nav>
-  <div class="flex items-center gap-1">
+"<nav data-slot="root">
+  <div data-slot="list" class="flex items-center gap-1">
     <!--v-if-->
-    <!--v-if--><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
-      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+    <!--v-if--><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
-      <!--v-if--><span class="truncate min-w-5 text-center">2</span>
+    </button><button type="button" data-type="page" aria-label="Page 2" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="2">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
-      <!--v-if--><span class="truncate min-w-5 text-center">3</span>
+    </button><button type="button" data-type="page" aria-label="Page 3" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="3">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
-      <!--v-if--><span class="truncate min-w-5 text-center">4</span>
+    </button><button type="button" data-type="page" aria-label="Page 4" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="4">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
-      <!--v-if--><span class="truncate min-w-5 text-center">5</span>
+    </button><button type="button" data-type="page" aria-label="Page 5" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5" value="5">
+      <!--v-if--><span data-slot="label" class="truncate min-w-5 text-center">5</span>
       <!--v-if-->
     </button>
     <!--v-if-->
diff --git a/test/components/__snapshots__/PinInput-vue.spec.ts.snap b/test/components/__snapshots__/PinInput-vue.spec.ts.snap
index 01f727c4a4..874a0ffb4c 100644
--- a/test/components/__snapshots__/PinInput-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PinInput-vue.spec.ts.snap
@@ -1,81 +1,81 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`PinInput > renders with ariaLabel correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" aria-label="Aria label" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with ariaLabel correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" aria-label="Aria label" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with as correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with as correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with class correctly 1`] = `"<div class="inline-flex items-center gap-1.5 absolute" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with class correctly 1`] = `"<div data-slot="root" class="inline-flex items-center gap-1.5 absolute" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with defaultValue correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" value="1"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value="1"></div>"`;
+exports[`PinInput > renders with defaultValue correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" value="1"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value="1"></div>"`;
 
-exports[`PinInput > renders with disabled correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr" data-disabled=""><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" disabled="" value=""></div>"`;
+exports[`PinInput > renders with disabled correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr" data-disabled=""><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" disabled="" value=""></div>"`;
 
-exports[`PinInput > renders with id correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" id="pin-input-id" value=""></div>"`;
+exports[`PinInput > renders with id correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" id="pin-input-id" value=""></div>"`;
 
-exports[`PinInput > renders with length correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 6" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 6" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 6" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 6" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 6" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 6 of 6" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with length correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 6" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 6" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 6" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 6" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 6" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 6 of 6" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with mask correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with mask correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with modelValue correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" value="1"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value="1"></div>"`;
+exports[`PinInput > renders with modelValue correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" value="1"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value="1"></div>"`;
 
-exports[`PinInput > renders with name correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="pin-input-name" value=""></div>"`;
+exports[`PinInput > renders with name correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="pin-input-name" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant ghost correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant ghost correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant ghost highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant ghost highlight correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant none correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant none correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant none highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant none highlight correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant outline correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant outline correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant outline highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant outline highlight correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant soft correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant soft correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant soft highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant soft highlight correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant subtle correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant subtle correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant subtle highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant subtle highlight correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with otp correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with otp correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with placeholder correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with placeholder correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant ghost correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant ghost correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant ghost highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant ghost highlight correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant none correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant none correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant none highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant none highlight correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant outline correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant outline correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant outline highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant outline highlight correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant soft correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant soft correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant soft highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant soft highlight correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant subtle correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant subtle correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant subtle highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant subtle highlight correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with required correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" required="" value=""></div>"`;
+exports[`PinInput > renders with required correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" required="" value=""></div>"`;
 
-exports[`PinInput > renders with size lg correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with size lg correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with size md correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with size md correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with size sm correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with size sm correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with size xl correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with size xl correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with size xs correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with size xs correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with type correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with type correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with ui correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with ui correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
diff --git a/test/components/__snapshots__/PinInput.spec.ts.snap b/test/components/__snapshots__/PinInput.spec.ts.snap
index 01f727c4a4..874a0ffb4c 100644
--- a/test/components/__snapshots__/PinInput.spec.ts.snap
+++ b/test/components/__snapshots__/PinInput.spec.ts.snap
@@ -1,81 +1,81 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`PinInput > renders with ariaLabel correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" aria-label="Aria label" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with ariaLabel correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" aria-label="Aria label" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with as correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with as correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with class correctly 1`] = `"<div class="inline-flex items-center gap-1.5 absolute" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with class correctly 1`] = `"<div data-slot="root" class="inline-flex items-center gap-1.5 absolute" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with defaultValue correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" value="1"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value="1"></div>"`;
+exports[`PinInput > renders with defaultValue correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" value="1"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value="1"></div>"`;
 
-exports[`PinInput > renders with disabled correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr" data-disabled=""><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" disabled="" value=""></div>"`;
+exports[`PinInput > renders with disabled correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr" data-disabled=""><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" disabled="" value=""></div>"`;
 
-exports[`PinInput > renders with id correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" id="pin-input-id" value=""></div>"`;
+exports[`PinInput > renders with id correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" id="pin-input-id" value=""></div>"`;
 
-exports[`PinInput > renders with length correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 6" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 6" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 6" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 6" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 6" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 6 of 6" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with length correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 6" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 6" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 6" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 6" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 6" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 6 of 6" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with mask correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with mask correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with modelValue correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" value="1"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value="1"></div>"`;
+exports[`PinInput > renders with modelValue correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" value="1"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value="1"></div>"`;
 
-exports[`PinInput > renders with name correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="pin-input-name" value=""></div>"`;
+exports[`PinInput > renders with name correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="pin-input-name" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant ghost correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant ghost correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant ghost highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant ghost highlight correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant none correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant none correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant none highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant none highlight correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant outline correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant outline correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant outline highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant outline highlight correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant soft correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant soft correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant soft highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant soft highlight correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant subtle correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant subtle correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant subtle highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant subtle highlight correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ring ring-inset ring-inverted"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with otp correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with otp correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with placeholder correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with placeholder correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant ghost correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant ghost correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant ghost highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant ghost highlight correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant none correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant none correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant none highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant none highlight correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-transparent ring ring-inset ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant outline correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant outline correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant outline highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant outline highlight correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant soft correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant soft correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant soft highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant soft highlight correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 ring ring-inset ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant subtle correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant subtle correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant subtle highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant subtle highlight correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-elevated focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ring ring-inset ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with required correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" required="" value=""></div>"`;
+exports[`PinInput > renders with required correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" required="" value=""></div>"`;
 
-exports[`PinInput > renders with size lg correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with size lg correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with size md correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with size md correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with size sm correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with size sm correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with size xl correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with size xl correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with size xs correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with size xs correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with type correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with type correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with ui correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
+exports[`PinInput > renders with ui correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" data-slot="base" class="border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" data-slot="base" class="border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" data-slot="base" class="border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" data-slot="base" class="border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" data-slot="base" class="border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>"`;
diff --git a/test/components/__snapshots__/Popover-vue.spec.ts.snap b/test/components/__snapshots__/Popover-vue.spec.ts.snap
index 9a0dc3bbab..314ccd5661 100644
--- a/test/components/__snapshots__/Popover-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Popover-vue.spec.ts.snap
@@ -7,7 +7,7 @@ Anchor slot
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" class="bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto" id="reka-popover-content-v-0" data-state="open" aria-labelledby="" role="dialog" data-side="bottom" data-align="center"></div>
+  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" data-slot="content" class="bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto" id="reka-popover-content-v-0" data-state="open" aria-labelledby="" role="dialog" data-side="bottom" data-align="center"></div>
 </div>
 
 
@@ -21,7 +21,7 @@ exports[`Popover > renders with arrow correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" class="bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto" id="reka-popover-content-v-0" data-state="open" aria-labelledby="" role="dialog" data-side="bottom" data-align="center"><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" class="fill-default" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span></div>
+  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" data-slot="content" class="bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto" id="reka-popover-content-v-0" data-state="open" aria-labelledby="" role="dialog" data-side="bottom" data-align="center"><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" data-slot="arrow" class="fill-default" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span></div>
 </div>
 
 
@@ -35,7 +35,7 @@ exports[`Popover > renders with class correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" class="bg-default rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto shadow-xl" id="reka-popover-content-v-0" data-state="open" aria-labelledby="" role="dialog" data-side="bottom" data-align="center"></div>
+  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" data-slot="content" class="bg-default rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto shadow-xl" id="reka-popover-content-v-0" data-state="open" aria-labelledby="" role="dialog" data-side="bottom" data-align="center"></div>
 </div>
 
 
@@ -49,7 +49,7 @@ exports[`Popover > renders with content slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" class="bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto" id="reka-popover-content-v-0" data-state="open" aria-labelledby="" role="dialog" data-side="bottom" data-align="center">Content slot
+  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" data-slot="content" class="bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto" id="reka-popover-content-v-0" data-state="open" aria-labelledby="" role="dialog" data-side="bottom" data-align="center">Content slot
     <!--v-if-->
   </div>
 </div>
@@ -65,7 +65,7 @@ exports[`Popover > renders with default slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" class="bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto" id="reka-popover-content-v-1" data-state="open" aria-labelledby="reka-popover-trigger-v-0" role="dialog" data-side="bottom" data-align="center"></div>
+  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" data-slot="content" class="bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto" id="reka-popover-content-v-1" data-state="open" aria-labelledby="reka-popover-trigger-v-0" role="dialog" data-side="bottom" data-align="center"></div>
 </div>
 
 
@@ -79,7 +79,7 @@ exports[`Popover > renders with open correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" class="bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto" id="reka-popover-content-v-0" data-state="open" aria-labelledby="" role="dialog" data-side="bottom" data-align="center"></div>
+  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" data-slot="content" class="bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto" id="reka-popover-content-v-0" data-state="open" aria-labelledby="" role="dialog" data-side="bottom" data-align="center"></div>
 </div>
 
 
@@ -93,7 +93,7 @@ exports[`Popover > renders with ui correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" class="bg-default rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto shadow-xl" id="reka-popover-content-v-0" data-state="open" aria-labelledby="" role="dialog" data-side="bottom" data-align="center"></div>
+  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" data-slot="content" class="bg-default rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto shadow-xl" id="reka-popover-content-v-0" data-state="open" aria-labelledby="" role="dialog" data-side="bottom" data-align="center"></div>
 </div>
 
 
diff --git a/test/components/__snapshots__/Popover.spec.ts.snap b/test/components/__snapshots__/Popover.spec.ts.snap
index cc1e424949..e2661fcb3a 100644
--- a/test/components/__snapshots__/Popover.spec.ts.snap
+++ b/test/components/__snapshots__/Popover.spec.ts.snap
@@ -7,7 +7,7 @@ Anchor slot
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" class="bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto" id="reka-popover-content-v-0-0-0" data-state="open" aria-labelledby="" role="dialog" data-side="bottom" data-align="center"></div>
+  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" data-slot="content" class="bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto" id="reka-popover-content-v-0-0-0" data-state="open" aria-labelledby="" role="dialog" data-side="bottom" data-align="center"></div>
 </div>
 
 
@@ -21,7 +21,7 @@ exports[`Popover > renders with arrow correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" class="bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto" id="reka-popover-content-v-0-0-0" data-state="open" aria-labelledby="" role="dialog" data-side="bottom" data-align="center"><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" class="fill-default" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span></div>
+  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" data-slot="content" class="bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto" id="reka-popover-content-v-0-0-0" data-state="open" aria-labelledby="" role="dialog" data-side="bottom" data-align="center"><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" data-slot="arrow" class="fill-default" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span></div>
 </div>
 
 
@@ -35,7 +35,7 @@ exports[`Popover > renders with class correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" class="bg-default rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto shadow-xl" id="reka-popover-content-v-0-0-0" data-state="open" aria-labelledby="" role="dialog" data-side="bottom" data-align="center"></div>
+  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" data-slot="content" class="bg-default rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto shadow-xl" id="reka-popover-content-v-0-0-0" data-state="open" aria-labelledby="" role="dialog" data-side="bottom" data-align="center"></div>
 </div>
 
 
@@ -49,7 +49,7 @@ exports[`Popover > renders with content slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" class="bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto" id="reka-popover-content-v-0-0-0" data-state="open" aria-labelledby="" role="dialog" data-side="bottom" data-align="center">Content slot
+  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" data-slot="content" class="bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto" id="reka-popover-content-v-0-0-0" data-state="open" aria-labelledby="" role="dialog" data-side="bottom" data-align="center">Content slot
     <!--v-if-->
   </div>
 </div>
@@ -65,7 +65,7 @@ exports[`Popover > renders with default slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" class="bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto" id="reka-popover-content-v-0-0-1" data-state="open" aria-labelledby="reka-popover-trigger-v-0-0-0" role="dialog" data-side="bottom" data-align="center"></div>
+  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" data-slot="content" class="bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto" id="reka-popover-content-v-0-0-1" data-state="open" aria-labelledby="reka-popover-trigger-v-0-0-0" role="dialog" data-side="bottom" data-align="center"></div>
 </div>
 
 
@@ -79,7 +79,7 @@ exports[`Popover > renders with open correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" class="bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto" id="reka-popover-content-v-0-0-0" data-state="open" aria-labelledby="" role="dialog" data-side="bottom" data-align="center"></div>
+  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" data-slot="content" class="bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto" id="reka-popover-content-v-0-0-0" data-state="open" aria-labelledby="" role="dialog" data-side="bottom" data-align="center"></div>
 </div>
 
 
@@ -93,7 +93,7 @@ exports[`Popover > renders with ui correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" class="bg-default rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto shadow-xl" id="reka-popover-content-v-0-0-0" data-state="open" aria-labelledby="" role="dialog" data-side="bottom" data-align="center"></div>
+  <div data-dismissable-layer="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" tabindex="-1" data-slot="content" class="bg-default rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto shadow-xl" id="reka-popover-content-v-0-0-0" data-state="open" aria-labelledby="" role="dialog" data-side="bottom" data-align="center"></div>
 </div>
 
 
diff --git a/test/components/__snapshots__/PricingPlan-vue.spec.ts.snap b/test/components/__snapshots__/PricingPlan-vue.spec.ts.snap
index fe799f0575..a82c3a76ad 100644
--- a/test/components/__snapshots__/PricingPlan-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PricingPlan-vue.spec.ts.snap
@@ -1,42 +1,42 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PricingPlan > renders with as correctly 1`] = `
-"<section data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<section data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </section>"
 `;
 
 exports[`PricingPlan > renders with badge correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
     <!--v-if-->
@@ -48,11 +48,11 @@ exports[`PricingPlan > renders with badge correctly 1`] = `
 `;
 
 exports[`PricingPlan > renders with badge object correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
     <!--v-if-->
@@ -64,48 +64,48 @@ exports[`PricingPlan > renders with badge object correctly 1`] = `
 `;
 
 exports[`PricingPlan > renders with badge slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
-  <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div>Badge slot
-    </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
-    </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <!--v-if-->
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div>Badge slot
+    </div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+    </div>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with billing cycle correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
       <!--v-if-->
       <!--v-if-->
     </div>
     <!--v-if-->
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">&nbsp;</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">&nbsp;</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
     <!--v-if-->
   </div>
@@ -114,18 +114,18 @@ exports[`PricingPlan > renders with billing cycle correctly 1`] = `
 `;
 
 exports[`PricingPlan > renders with billing period correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
       <!--v-if-->
       <!--v-if-->
     </div>
     <!--v-if-->
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span>
         <!--v-if-->
       </div>
     </div>
@@ -136,56 +136,56 @@ exports[`PricingPlan > renders with billing period correctly 1`] = `
 `;
 
 exports[`PricingPlan > renders with billing slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0">Billing slot</div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0">Billing slot</div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with body slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">Body slot</div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="body" class="flex flex-col min-w-0">Body slot</div>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with button correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -193,10 +193,10 @@ exports[`PricingPlan > renders with button correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
     <!--v-if-->
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -205,72 +205,72 @@ exports[`PricingPlan > renders with button correctly 1`] = `
 `;
 
 exports[`PricingPlan > renders with button slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if-->Button slot<div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if-->Button slot<div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with class correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default rounded-xl">
+"<div data-orientation="vertical" data-slot="root" class="relative grid p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default rounded-xl">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with description correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -279,48 +279,48 @@ exports[`PricingPlan > renders with description correctly 1`] = `
 `;
 
 exports[`PricingPlan > renders with description slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description slot</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description slot</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with discount correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
       <!--v-if-->
       <!--v-if-->
     </div>
     <!--v-if-->
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -330,50 +330,50 @@ exports[`PricingPlan > renders with discount correctly 1`] = `
 `;
 
 exports[`PricingPlan > renders with discount slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">Discount slot</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">Discount slot</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with features correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
       <!--v-if-->
       <!--v-if-->
     </div>
     <!--v-if-->
     <!--v-if-->
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
   <!--v-if-->
@@ -381,19 +381,19 @@ exports[`PricingPlan > renders with features correctly 1`] = `
 `;
 
 exports[`PricingPlan > renders with features object correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
       <!--v-if-->
       <!--v-if-->
     </div>
     <!--v-if-->
     <!--v-if-->
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
   <!--v-if-->
@@ -401,192 +401,192 @@ exports[`PricingPlan > renders with features object correctly 1`] = `
 `;
 
 exports[`PricingPlan > renders with features slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">Features slot</ul>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">Features slot</ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with footer slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">Footer slot</div>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">Footer slot</div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with header slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
-  <div class="">Header slot</div>
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-slot="header" class="">Header slot</div>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with highlight correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring-2 ring-inset ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring-2 ring-inset ring-primary">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with orientation horizontal correctly 1`] = `
-"<div data-orientation="horizontal" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default bg-default ring ring-default">
+"<div data-orientation="horizontal" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0 lg:col-span-2 pb-6 lg:pb-0 lg:pr-6 justify-center">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0 lg:col-span-2 pb-6 lg:pb-0 lg:pr-6 justify-center">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
     <!--v-if-->
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0 lg:grid lg:grid-cols-2 lg:mt-12">
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0 lg:grid lg:grid-cols-2 lg:mt-12">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <div class="flex items-center gap-1">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
-    </div><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+    </div><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with orientation vertical correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with price correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
       <!--v-if-->
       <!--v-if-->
     </div>
     <!--v-if-->
-    <div class="flex items-center gap-1 mt-6">
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
       <!--v-if-->
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$249</div>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -596,72 +596,72 @@ exports[`PricingPlan > renders with price correctly 1`] = `
 `;
 
 exports[`PricingPlan > renders with price slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Price slot</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">Price slot</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with scale correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default lg:scale-[1.1] lg:z-[1]">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default lg:scale-[1.1] lg:z-[1]">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with tagline correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -669,8 +669,8 @@ exports[`PricingPlan > renders with tagline correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
@@ -679,41 +679,41 @@ exports[`PricingPlan > renders with tagline correctly 1`] = `
 `;
 
 exports[`PricingPlan > renders with tagline slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline slot</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline slot</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with terms correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -721,52 +721,52 @@ exports[`PricingPlan > renders with terms correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with terms slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms slot</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms slot</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with title correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -778,187 +778,187 @@ exports[`PricingPlan > renders with title correctly 1`] = `
 `;
 
 exports[`PricingPlan > renders with title slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title slot</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title slot</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with ui correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col items-center justify-end gap-12">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col items-center justify-end gap-12">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with variant outline correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with variant soft correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-elevated/50">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-elevated/50">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with variant solid correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-inverted">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-2xl sm:text-3xl text-pretty font-semibold text-inverted">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-2xl sm:text-3xl text-pretty font-semibold text-inverted">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-base text-pretty mt-2 text-dimmed">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="line-through text-xl sm:text-2xl text-dimmed">$249</div>
-      <div class="text-3xl sm:text-4xl font-semibold text-inverted">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="truncate text-xs font-medium text-dimmed">billed annually</span><span class="truncate text-xs font-medium text-dimmed">/month</span></div>
+    <div data-slot="description" class="text-base text-pretty mt-2 text-dimmed">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="line-through text-xl sm:text-2xl text-dimmed">$249</div>
+      <div data-slot="price" class="text-3xl sm:text-4xl font-semibold text-inverted">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="truncate text-xs font-medium text-dimmed">billed annually</span><span data-slot="billingCycle" class="truncate text-xs font-medium text-dimmed">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-sm truncate text-dimmed">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-sm truncate text-dimmed">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-sm truncate text-dimmed">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-sm truncate text-dimmed">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-sm truncate text-dimmed">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-sm truncate text-dimmed">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with variant subtle correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-elevated/50 ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-elevated/50 ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
diff --git a/test/components/__snapshots__/PricingPlan.spec.ts.snap b/test/components/__snapshots__/PricingPlan.spec.ts.snap
index 97c1ade272..a0f898eacc 100644
--- a/test/components/__snapshots__/PricingPlan.spec.ts.snap
+++ b/test/components/__snapshots__/PricingPlan.spec.ts.snap
@@ -1,42 +1,42 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PricingPlan > renders with as correctly 1`] = `
-"<section data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<section data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </section>"
 `;
 
 exports[`PricingPlan > renders with badge correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
     <!--v-if-->
@@ -48,11 +48,11 @@ exports[`PricingPlan > renders with badge correctly 1`] = `
 `;
 
 exports[`PricingPlan > renders with badge object correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
     <!--v-if-->
@@ -64,48 +64,48 @@ exports[`PricingPlan > renders with badge object correctly 1`] = `
 `;
 
 exports[`PricingPlan > renders with badge slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
-  <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div>Badge slot
-    </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
-    </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <!--v-if-->
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div>Badge slot
+    </div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+    </div>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with billing cycle correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
       <!--v-if-->
       <!--v-if-->
     </div>
     <!--v-if-->
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">&nbsp;</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">&nbsp;</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
     <!--v-if-->
   </div>
@@ -114,18 +114,18 @@ exports[`PricingPlan > renders with billing cycle correctly 1`] = `
 `;
 
 exports[`PricingPlan > renders with billing period correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
       <!--v-if-->
       <!--v-if-->
     </div>
     <!--v-if-->
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span>
         <!--v-if-->
       </div>
     </div>
@@ -136,56 +136,56 @@ exports[`PricingPlan > renders with billing period correctly 1`] = `
 `;
 
 exports[`PricingPlan > renders with billing slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0">Billing slot</div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0">Billing slot</div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with body slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">Body slot</div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="body" class="flex flex-col min-w-0">Body slot</div>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with button correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -193,10 +193,10 @@ exports[`PricingPlan > renders with button correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
     <!--v-if-->
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -205,72 +205,72 @@ exports[`PricingPlan > renders with button correctly 1`] = `
 `;
 
 exports[`PricingPlan > renders with button slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if-->Button slot<div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if-->Button slot<div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with class correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default rounded-xl">
+"<div data-orientation="vertical" data-slot="root" class="relative grid p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default rounded-xl">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with description correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -279,48 +279,48 @@ exports[`PricingPlan > renders with description correctly 1`] = `
 `;
 
 exports[`PricingPlan > renders with description slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description slot</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description slot</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with discount correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
       <!--v-if-->
       <!--v-if-->
     </div>
     <!--v-if-->
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -330,50 +330,50 @@ exports[`PricingPlan > renders with discount correctly 1`] = `
 `;
 
 exports[`PricingPlan > renders with discount slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">Discount slot</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">Discount slot</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with features correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
       <!--v-if-->
       <!--v-if-->
     </div>
     <!--v-if-->
     <!--v-if-->
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
   <!--v-if-->
@@ -381,19 +381,19 @@ exports[`PricingPlan > renders with features correctly 1`] = `
 `;
 
 exports[`PricingPlan > renders with features object correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
       <!--v-if-->
       <!--v-if-->
     </div>
     <!--v-if-->
     <!--v-if-->
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:info size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:star size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:info size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:star size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
   <!--v-if-->
@@ -401,192 +401,192 @@ exports[`PricingPlan > renders with features object correctly 1`] = `
 `;
 
 exports[`PricingPlan > renders with features slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">Features slot</ul>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">Features slot</ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with footer slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">Footer slot</div>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">Footer slot</div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with header slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
-  <div class="">Header slot</div>
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-slot="header" class="">Header slot</div>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with highlight correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring-2 ring-inset ring-primary">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring-2 ring-inset ring-primary">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with orientation horizontal correctly 1`] = `
-"<div data-orientation="horizontal" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default bg-default ring ring-default">
+"<div data-orientation="horizontal" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0 lg:col-span-2 pb-6 lg:pb-0 lg:pr-6 justify-center">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0 lg:col-span-2 pb-6 lg:pb-0 lg:pr-6 justify-center">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
     <!--v-if-->
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0 lg:grid lg:grid-cols-2 lg:mt-12">
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0 lg:grid lg:grid-cols-2 lg:mt-12">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <div class="flex items-center gap-1">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
-    </div><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
+    </div><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with orientation vertical correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with price correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
       <!--v-if-->
       <!--v-if-->
     </div>
     <!--v-if-->
-    <div class="flex items-center gap-1 mt-6">
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
       <!--v-if-->
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$249</div>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -596,72 +596,72 @@ exports[`PricingPlan > renders with price correctly 1`] = `
 `;
 
 exports[`PricingPlan > renders with price slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Price slot</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">Price slot</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with scale correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default lg:scale-[1.1] lg:z-[1]">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default lg:scale-[1.1] lg:z-[1]">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with tagline correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -669,8 +669,8 @@ exports[`PricingPlan > renders with tagline correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
@@ -679,41 +679,41 @@ exports[`PricingPlan > renders with tagline correctly 1`] = `
 `;
 
 exports[`PricingPlan > renders with tagline slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline slot</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline slot</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with terms correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
       <!--v-if-->
       <!--v-if-->
     </div>
@@ -721,52 +721,52 @@ exports[`PricingPlan > renders with terms correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with terms slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms slot</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms slot</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with title correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -778,187 +778,187 @@ exports[`PricingPlan > renders with title correctly 1`] = `
 `;
 
 exports[`PricingPlan > renders with title slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title slot</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title slot</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with ui correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col items-center justify-end gap-12">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col items-center justify-end gap-12">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with variant outline correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with variant soft correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-elevated/50">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-elevated/50">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with variant solid correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-inverted">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-inverted">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-2xl sm:text-3xl text-pretty font-semibold text-inverted">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-2xl sm:text-3xl text-pretty font-semibold text-inverted">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-base text-pretty mt-2 text-dimmed">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="line-through text-xl sm:text-2xl text-dimmed">$249</div>
-      <div class="text-3xl sm:text-4xl font-semibold text-inverted">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="truncate text-xs font-medium text-dimmed">billed annually</span><span class="truncate text-xs font-medium text-dimmed">/month</span></div>
+    <div data-slot="description" class="text-base text-pretty mt-2 text-dimmed">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="line-through text-xl sm:text-2xl text-dimmed">$249</div>
+      <div data-slot="price" class="text-3xl sm:text-4xl font-semibold text-inverted">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="truncate text-xs font-medium text-dimmed">billed annually</span><span data-slot="billingCycle" class="truncate text-xs font-medium text-dimmed">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-sm truncate text-dimmed">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-sm truncate text-dimmed">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-sm truncate text-dimmed">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-sm truncate text-dimmed">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-sm truncate text-dimmed">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-sm truncate text-dimmed">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
 
 exports[`PricingPlan > renders with variant subtle correctly 1`] = `
-"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-elevated/50 ring ring-default">
+"<div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-elevated/50 ring ring-default">
   <!--v-if-->
-  <div class="flex flex-col min-w-0">
-    <div class="flex items-center gap-3">
-      <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+  <div data-slot="body" class="flex flex-col min-w-0">
+    <div data-slot="titleWrapper" class="flex items-center gap-3">
+      <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Title</div><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
       <!--v-if--></span>
     </div>
-    <div class="text-muted text-base text-pretty mt-2">Description</div>
-    <div class="flex items-center gap-1 mt-6">
-      <div class="text-muted line-through text-xl sm:text-2xl">$249</div>
-      <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
-      <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+    <div data-slot="description" class="text-muted text-base text-pretty mt-2">Description</div>
+    <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
+      <div data-slot="discount" class="text-muted line-through text-xl sm:text-2xl">$249</div>
+      <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$199</div>
+      <div data-slot="billing" class="flex flex-col justify-between min-w-0"><span data-slot="billingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="billingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
     </div>
-    <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-      <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+    <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+      <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
     </ul>
   </div>
-  <div class="flex flex-col gap-6 items-center justify-end">
-    <div class="text-base font-semibold text-default">Tagline</div>
-    <!--v-if--><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-      <!--v-if--><span class="truncate">Buy now</span>
+  <div data-slot="footer" class="flex flex-col gap-6 items-center justify-end">
+    <div data-slot="tagline" class="text-base font-semibold text-default">Tagline</div>
+    <!--v-if--><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span data-slot="label" class="truncate">Buy now</span>
       <!--v-if-->
     </button>
-    <div class="text-xs/5 text-muted text-center text-balance">Terms</div>
+    <div data-slot="terms" class="text-xs/5 text-muted text-center text-balance">Terms</div>
   </div>
 </div>"
 `;
diff --git a/test/components/__snapshots__/PricingPlans-vue.spec.ts.snap b/test/components/__snapshots__/PricingPlans-vue.spec.ts.snap
index b1a0853950..7bcc641718 100644
--- a/test/components/__snapshots__/PricingPlans-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PricingPlans-vue.spec.ts.snap
@@ -3,67 +3,67 @@
 exports[`PricingPlans > renders with as correctly 1`] = `
 "<section data-orientation="horizontal" class="flex flex-col gap-y-8 lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))] gap-x-8" style="--count: 3;">
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
   </div>
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
   </div>
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
@@ -74,67 +74,67 @@ exports[`PricingPlans > renders with as correctly 1`] = `
 exports[`PricingPlans > renders with class correctly 1`] = `
 "<div data-orientation="horizontal" class="flex flex-col lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))] gap-x-8 gap-y-12" style="--count: 3;">
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
   </div>
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
   </div>
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
@@ -145,67 +145,67 @@ exports[`PricingPlans > renders with class correctly 1`] = `
 exports[`PricingPlans > renders with compact and scale correctly 1`] = `
 "<div data-orientation="horizontal" class="flex flex-col gap-y-8 lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))]" style="--count: 3;">
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
   </div>
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
   </div>
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
@@ -216,67 +216,67 @@ exports[`PricingPlans > renders with compact and scale correctly 1`] = `
 exports[`PricingPlans > renders with compact correctly 1`] = `
 "<div data-orientation="horizontal" class="flex flex-col gap-y-8 lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))]" style="--count: 3;">
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
   </div>
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
   </div>
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
@@ -289,23 +289,23 @@ exports[`PricingPlans > renders with default slot correctly 1`] = `"<div data-or
 exports[`PricingPlans > renders with one plan correctly 1`] = `
 "<div data-orientation="horizontal" class="flex flex-col gap-y-8 lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))] gap-x-8" style="--count: 1;">
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
@@ -316,26 +316,26 @@ exports[`PricingPlans > renders with one plan correctly 1`] = `
 exports[`PricingPlans > renders with orientation vertical correctly 1`] = `
 "<div data-orientation="vertical" class="flex flex-col gap-y-8 gap-x-8" style="--count: 3;">
   <!---->
-  <div data-orientation="horizontal" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default bg-default ring ring-default">
+  <div data-orientation="horizontal" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0 lg:col-span-2 pb-6 lg:pb-0 lg:pr-6 justify-center">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
+    <div data-slot="body" class="flex flex-col min-w-0 lg:col-span-2 pb-6 lg:pb-0 lg:pr-6 justify-center">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
         <!--v-if-->
       </div>
       <!--v-if-->
       <!--v-if-->
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0 lg:grid lg:grid-cols-2 lg:mt-12">
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0 lg:grid lg:grid-cols-2 lg:mt-12">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
-    <div class="flex flex-col gap-6 items-center lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto">
+    <div data-slot="footer" class="flex flex-col gap-6 items-center lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto">
       <!--v-if-->
-      <div class="flex items-center gap-1">
+      <div data-slot="priceWrapper" class="flex items-center gap-1">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -343,26 +343,26 @@ exports[`PricingPlans > renders with orientation vertical correctly 1`] = `
     </div>
   </div>
   <!---->
-  <div data-orientation="horizontal" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default bg-default ring ring-default">
+  <div data-orientation="horizontal" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0 lg:col-span-2 pb-6 lg:pb-0 lg:pr-6 justify-center">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
+    <div data-slot="body" class="flex flex-col min-w-0 lg:col-span-2 pb-6 lg:pb-0 lg:pr-6 justify-center">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
         <!--v-if-->
       </div>
       <!--v-if-->
       <!--v-if-->
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0 lg:grid lg:grid-cols-2 lg:mt-12">
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0 lg:grid lg:grid-cols-2 lg:mt-12">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
-    <div class="flex flex-col gap-6 items-center lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto">
+    <div data-slot="footer" class="flex flex-col gap-6 items-center lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto">
       <!--v-if-->
-      <div class="flex items-center gap-1">
+      <div data-slot="priceWrapper" class="flex items-center gap-1">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -370,26 +370,26 @@ exports[`PricingPlans > renders with orientation vertical correctly 1`] = `
     </div>
   </div>
   <!---->
-  <div data-orientation="horizontal" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default bg-default ring ring-default">
+  <div data-orientation="horizontal" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0 lg:col-span-2 pb-6 lg:pb-0 lg:pr-6 justify-center">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
+    <div data-slot="body" class="flex flex-col min-w-0 lg:col-span-2 pb-6 lg:pb-0 lg:pr-6 justify-center">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
         <!--v-if-->
       </div>
       <!--v-if-->
       <!--v-if-->
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0 lg:grid lg:grid-cols-2 lg:mt-12">
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0 lg:grid lg:grid-cols-2 lg:mt-12">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
-    <div class="flex flex-col gap-6 items-center lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto">
+    <div data-slot="footer" class="flex flex-col gap-6 items-center lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto">
       <!--v-if-->
-      <div class="flex items-center gap-1">
+      <div data-slot="priceWrapper" class="flex items-center gap-1">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -402,67 +402,67 @@ exports[`PricingPlans > renders with orientation vertical correctly 1`] = `
 exports[`PricingPlans > renders with scale correctly 1`] = `
 "<div data-orientation="horizontal" class="flex flex-col gap-y-8 lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))] gap-x-8 lg:gap-x-13" style="--count: 3;">
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
   </div>
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
   </div>
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
@@ -473,67 +473,67 @@ exports[`PricingPlans > renders with scale correctly 1`] = `
 exports[`PricingPlans > renders with three plans correctly 1`] = `
 "<div data-orientation="horizontal" class="flex flex-col gap-y-8 lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))] gap-x-8" style="--count: 3;">
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
   </div>
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
   </div>
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
@@ -544,45 +544,45 @@ exports[`PricingPlans > renders with three plans correctly 1`] = `
 exports[`PricingPlans > renders with two plans correctly 1`] = `
 "<div data-orientation="horizontal" class="flex flex-col gap-y-8 lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))] gap-x-8" style="--count: 2;">
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
   </div>
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="featureIcon" class="size-5 shrink-0 text-primary"></svg><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
diff --git a/test/components/__snapshots__/PricingPlans.spec.ts.snap b/test/components/__snapshots__/PricingPlans.spec.ts.snap
index 88b9d56727..9eed3048bb 100644
--- a/test/components/__snapshots__/PricingPlans.spec.ts.snap
+++ b/test/components/__snapshots__/PricingPlans.spec.ts.snap
@@ -3,67 +3,67 @@
 exports[`PricingPlans > renders with as correctly 1`] = `
 "<section data-orientation="horizontal" class="flex flex-col gap-y-8 lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))] gap-x-8" style="--count: 3;">
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
   </div>
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
   </div>
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
@@ -74,67 +74,67 @@ exports[`PricingPlans > renders with as correctly 1`] = `
 exports[`PricingPlans > renders with class correctly 1`] = `
 "<div data-orientation="horizontal" class="flex flex-col lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))] gap-x-8 gap-y-12" style="--count: 3;">
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
   </div>
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
   </div>
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
@@ -145,67 +145,67 @@ exports[`PricingPlans > renders with class correctly 1`] = `
 exports[`PricingPlans > renders with compact and scale correctly 1`] = `
 "<div data-orientation="horizontal" class="flex flex-col gap-y-8 lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))]" style="--count: 3;">
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
   </div>
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
   </div>
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
@@ -216,67 +216,67 @@ exports[`PricingPlans > renders with compact and scale correctly 1`] = `
 exports[`PricingPlans > renders with compact correctly 1`] = `
 "<div data-orientation="horizontal" class="flex flex-col gap-y-8 lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))]" style="--count: 3;">
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
   </div>
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
   </div>
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
@@ -289,23 +289,23 @@ exports[`PricingPlans > renders with default slot correctly 1`] = `"<div data-or
 exports[`PricingPlans > renders with one plan correctly 1`] = `
 "<div data-orientation="horizontal" class="flex flex-col gap-y-8 lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))] gap-x-8" style="--count: 1;">
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
@@ -316,26 +316,26 @@ exports[`PricingPlans > renders with one plan correctly 1`] = `
 exports[`PricingPlans > renders with orientation vertical correctly 1`] = `
 "<div data-orientation="vertical" class="flex flex-col gap-y-8 gap-x-8" style="--count: 3;">
   <!---->
-  <div data-orientation="horizontal" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default bg-default ring ring-default">
+  <div data-orientation="horizontal" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0 lg:col-span-2 pb-6 lg:pb-0 lg:pr-6 justify-center">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
+    <div data-slot="body" class="flex flex-col min-w-0 lg:col-span-2 pb-6 lg:pb-0 lg:pr-6 justify-center">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
         <!--v-if-->
       </div>
       <!--v-if-->
       <!--v-if-->
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0 lg:grid lg:grid-cols-2 lg:mt-12">
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0 lg:grid lg:grid-cols-2 lg:mt-12">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
-    <div class="flex flex-col gap-6 items-center lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto">
+    <div data-slot="footer" class="flex flex-col gap-6 items-center lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto">
       <!--v-if-->
-      <div class="flex items-center gap-1">
+      <div data-slot="priceWrapper" class="flex items-center gap-1">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -343,26 +343,26 @@ exports[`PricingPlans > renders with orientation vertical correctly 1`] = `
     </div>
   </div>
   <!---->
-  <div data-orientation="horizontal" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default bg-default ring ring-default">
+  <div data-orientation="horizontal" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0 lg:col-span-2 pb-6 lg:pb-0 lg:pr-6 justify-center">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
+    <div data-slot="body" class="flex flex-col min-w-0 lg:col-span-2 pb-6 lg:pb-0 lg:pr-6 justify-center">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
         <!--v-if-->
       </div>
       <!--v-if-->
       <!--v-if-->
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0 lg:grid lg:grid-cols-2 lg:mt-12">
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0 lg:grid lg:grid-cols-2 lg:mt-12">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
-    <div class="flex flex-col gap-6 items-center lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto">
+    <div data-slot="footer" class="flex flex-col gap-6 items-center lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto">
       <!--v-if-->
-      <div class="flex items-center gap-1">
+      <div data-slot="priceWrapper" class="flex items-center gap-1">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -370,26 +370,26 @@ exports[`PricingPlans > renders with orientation vertical correctly 1`] = `
     </div>
   </div>
   <!---->
-  <div data-orientation="horizontal" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default bg-default ring ring-default">
+  <div data-orientation="horizontal" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0 lg:col-span-2 pb-6 lg:pb-0 lg:pr-6 justify-center">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
+    <div data-slot="body" class="flex flex-col min-w-0 lg:col-span-2 pb-6 lg:pb-0 lg:pr-6 justify-center">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
         <!--v-if-->
       </div>
       <!--v-if-->
       <!--v-if-->
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0 lg:grid lg:grid-cols-2 lg:mt-12">
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0 lg:grid lg:grid-cols-2 lg:mt-12">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
-    <div class="flex flex-col gap-6 items-center lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto">
+    <div data-slot="footer" class="flex flex-col gap-6 items-center lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto">
       <!--v-if-->
-      <div class="flex items-center gap-1">
+      <div data-slot="priceWrapper" class="flex items-center gap-1">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -402,67 +402,67 @@ exports[`PricingPlans > renders with orientation vertical correctly 1`] = `
 exports[`PricingPlans > renders with scale correctly 1`] = `
 "<div data-orientation="horizontal" class="flex flex-col gap-y-8 lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))] gap-x-8 lg:gap-x-13" style="--count: 3;">
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
   </div>
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
   </div>
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
@@ -473,67 +473,67 @@ exports[`PricingPlans > renders with scale correctly 1`] = `
 exports[`PricingPlans > renders with three plans correctly 1`] = `
 "<div data-orientation="horizontal" class="flex flex-col gap-y-8 lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))] gap-x-8" style="--count: 3;">
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
   </div>
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
   </div>
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Enterprise</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$30</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
@@ -544,45 +544,45 @@ exports[`PricingPlans > renders with three plans correctly 1`] = `
 exports[`PricingPlans > renders with two plans correctly 1`] = `
 "<div data-orientation="horizontal" class="flex flex-col gap-y-8 lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))] gap-x-8" style="--count: 2;">
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Basic</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$10</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
   </div>
   <!---->
-  <div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <div data-orientation="vertical" data-slot="root" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
     <!--v-if-->
-    <div class="flex flex-col min-w-0">
-      <div class="flex items-center gap-3">
-        <div class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
+    <div data-slot="body" class="flex flex-col min-w-0">
+      <div data-slot="titleWrapper" class="flex items-center gap-3">
+        <div data-slot="title" class="text-highlighted text-2xl sm:text-3xl text-pretty font-semibold">Pro</div>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div class="flex items-center gap-1 mt-6">
+      <div data-slot="priceWrapper" class="flex items-center gap-1 mt-6">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
+        <div data-slot="price" class="text-highlighted text-3xl sm:text-4xl font-semibold">$20</div>
         <!--v-if-->
       </div>
-      <ul class="flex flex-col gap-3 flex-1 mt-6 grow-0">
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 1</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 2</span></li>
-        <li class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span><span class="text-muted text-sm truncate">Feature 3</span></li>
+      <ul data-slot="features" class="flex flex-col gap-3 flex-1 mt-6 grow-0">
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 1</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 2</span></li>
+        <li data-slot="feature" class="flex items-center gap-2 min-w-0"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="featureIcon"></span><span data-slot="featureTitle" class="text-muted text-sm truncate">Feature 3</span></li>
       </ul>
     </div>
     <!--v-if-->
diff --git a/test/components/__snapshots__/PricingTable-vue.spec.ts.snap b/test/components/__snapshots__/PricingTable-vue.spec.ts.snap
index b3f031695e..36b129bcf7 100644
--- a/test/components/__snapshots__/PricingTable-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PricingTable-vue.spec.ts.snap
@@ -1,275 +1,275 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PricingTable > renders with as correctly 1`] = `
-"<section class="w-full relative">
-  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+"<section data-slot="root" class="w-full relative">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
     <!--v-if-->
-    <thead class="">
-      <tr class="">
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Free</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
             <!--v-if--></span>
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Contact us</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
               <!--v-if-->
             </button></div>
         </th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Free</div>
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
         <!--v-if--></span>
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Contact us</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
@@ -278,275 +278,275 @@ exports[`PricingTable > renders with as correctly 1`] = `
 `;
 
 exports[`PricingTable > renders with caption correctly 1`] = `
-"<div class="w-full relative">
-  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
-    <caption class="sr-only">Caption</caption>
-    <thead class="">
-      <tr class="">
+"<div data-slot="root" class="w-full relative">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+    <caption data-slot="caption" class="sr-only">Caption</caption>
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Free</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
             <!--v-if--></span>
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Contact us</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
               <!--v-if-->
             </button></div>
         </th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Free</div>
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
         <!--v-if--></span>
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Contact us</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
@@ -555,275 +555,275 @@ exports[`PricingTable > renders with caption correctly 1`] = `
 `;
 
 exports[`PricingTable > renders with caption slot correctly 1`] = `
-"<div class="w-full relative">
-  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
-    <caption class="sr-only">Caption slot</caption>
-    <thead class="">
-      <tr class="">
+"<div data-slot="root" class="w-full relative">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+    <caption data-slot="caption" class="sr-only">Caption slot</caption>
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Free</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
             <!--v-if--></span>
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Contact us</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
               <!--v-if-->
             </button></div>
         </th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Free</div>
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
         <!--v-if--></span>
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Contact us</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
@@ -832,275 +832,275 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
 `;
 
 exports[`PricingTable > renders with class correctly 1`] = `
-"<div class="w-full relative max-w-sm">
-  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+"<div data-slot="root" class="w-full relative max-w-sm">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
     <!--v-if-->
-    <thead class="">
-      <tr class="">
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Free</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
             <!--v-if--></span>
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Contact us</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
               <!--v-if-->
             </button></div>
         </th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Free</div>
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
         <!--v-if--></span>
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Contact us</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
@@ -1109,185 +1109,185 @@ exports[`PricingTable > renders with class correctly 1`] = `
 `;
 
 exports[`PricingTable > renders with tier slot correctly 1`] = `
-"<div class="w-full relative">
-  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+"<div data-slot="root" class="w-full relative">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
     <!--v-if-->
-    <thead class="">
-      <tr class="">
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">Tier slot</th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">Tier slot</th>
-        <th scope="col" class="p-6 text-left font-normal">Tier slot</th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">Tier slot</th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">Tier slot</th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">Tier slot</th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">Tier slot<div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">Tier slot<div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">Tier slot<div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">Tier slot<div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">Tier slot<div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">Tier slot<div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
@@ -1296,269 +1296,269 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
 `;
 
 exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
-"<div class="w-full relative">
-  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+"<div data-slot="root" class="w-full relative">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
     <!--v-if-->
-    <thead class="">
-      <tr class="">
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Free</div>Tier badge slot
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>Tier badge slot
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Pro</div>Tier badge slot
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div>Tier badge slot
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Enterprise</div>Tier badge slot
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>Tier badge slot
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Contact us</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
               <!--v-if-->
             </button></div>
         </th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Free</div>Tier badge slot
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>Tier badge slot
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Pro</div>Tier badge slot
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div>Tier badge slot
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Enterprise</div>Tier badge slot
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>Tier badge slot
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Contact us</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
@@ -1567,275 +1567,275 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
 `;
 
 exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
-"<div class="w-full relative">
-  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+"<div data-slot="root" class="w-full relative">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
     <!--v-if-->
-    <thead class="">
-      <tr class="">
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Free</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-            <div class="flex flex-col justify-between min-w-0">Tier billing slot</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
             <!--v-if--></span>
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div class="flex flex-col justify-between min-w-0">Tier billing slot</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-            <div class="flex flex-col justify-between min-w-0">Tier billing slot</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Contact us</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
               <!--v-if-->
             </button></div>
         </th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Free</div>
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-        <div class="flex flex-col justify-between min-w-0">Tier billing slot</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
         <!--v-if--></span>
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div class="flex flex-col justify-between min-w-0">Tier billing slot</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-        <div class="flex flex-col justify-between min-w-0">Tier billing slot</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Contact us</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
@@ -1844,257 +1844,257 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
 `;
 
 exports[`PricingTable > renders with tier-button slot correctly 1`] = `
-"<div class="w-full relative">
-  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+"<div data-slot="root" class="w-full relative">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
     <!--v-if-->
-    <thead class="">
-      <tr class="">
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Free</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
             <!--v-if-->
           </div>
-          <div class="mt-6">Tier button slot</div>
+          <div data-slot="tierButton" class="mt-6">Tier button slot</div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
             <!--v-if--></span>
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
           </div>
-          <div class="mt-6">Tier button slot</div>
+          <div data-slot="tierButton" class="mt-6">Tier button slot</div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
             <!--v-if-->
           </div>
-          <div class="mt-6">Tier button slot</div>
+          <div data-slot="tierButton" class="mt-6">Tier button slot</div>
         </th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Free</div>
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
         <!--v-if-->
       </div>
-      <div class="mt-6">Tier button slot</div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="tierButton" class="mt-6">Tier button slot</div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
         <!--v-if--></span>
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
       </div>
-      <div class="mt-6">Tier button slot</div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="tierButton" class="mt-6">Tier button slot</div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
         <!--v-if-->
       </div>
-      <div class="mt-6">Tier button slot</div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="tierButton" class="mt-6">Tier button slot</div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
@@ -2103,275 +2103,275 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
 `;
 
 exports[`PricingTable > renders with tier-description slot correctly 1`] = `
-"<div class="w-full relative">
-  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+"<div data-slot="root" class="w-full relative">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
     <!--v-if-->
-    <thead class="">
-      <tr class="">
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Free</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">Tier description slot</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
             <!--v-if--></span>
           </div>
-          <div class="text-sm font-normal text-muted mt-1">Tier description slot</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">Tier description slot</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Contact us</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
               <!--v-if-->
             </button></div>
         </th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Free</div>
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">Tier description slot</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
         <!--v-if--></span>
       </div>
-      <div class="text-sm font-normal text-muted mt-1">Tier description slot</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">Tier description slot</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Contact us</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
@@ -2380,275 +2380,275 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
 `;
 
 exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
-"<div class="w-full relative">
-  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+"<div data-slot="root" class="w-full relative">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
     <!--v-if-->
-    <thead class="">
-      <tr class="">
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Free</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div class="flex items-center gap-1 mt-4">
-            <div class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+            <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
             <!--v-if--></span>
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div class="flex items-center gap-1 mt-4">
-            <div class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+            <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div class="flex items-center gap-1 mt-4">
-            <div class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+            <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Contact us</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
               <!--v-if-->
             </button></div>
         </th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Free</div>
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div class="flex items-center gap-1 mt-4">
-        <div class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+        <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
         <!--v-if--></span>
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div class="flex items-center gap-1 mt-4">
-        <div class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+        <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div class="flex items-center gap-1 mt-4">
-        <div class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+        <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Contact us</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
@@ -2657,275 +2657,275 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
 `;
 
 exports[`PricingTable > renders with tier-price slot correctly 1`] = `
-"<div class="w-full relative">
-  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+"<div data-slot="root" class="w-full relative">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
     <!--v-if-->
-    <thead class="">
-      <tr class="">
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Free</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
             <!--v-if--></span>
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
-            <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Contact us</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
               <!--v-if-->
             </button></div>
         </th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Free</div>
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
         <!--v-if--></span>
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
-        <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Contact us</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
@@ -2934,275 +2934,275 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
 `;
 
 exports[`PricingTable > renders with tier-title slot correctly 1`] = `
-"<div class="w-full relative">
-  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+"<div data-slot="root" class="w-full relative">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
     <!--v-if-->
-    <thead class="">
-      <tr class="">
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Tier title slot</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Tier title slot</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
             <!--v-if--></span>
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Tier title slot</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Contact us</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
               <!--v-if-->
             </button></div>
         </th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Tier title slot</div>
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Tier title slot</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
         <!--v-if--></span>
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Tier title slot</div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Contact us</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
@@ -3211,275 +3211,275 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
 `;
 
 exports[`PricingTable > renders with tiers and sections correctly 1`] = `
-"<div class="w-full relative">
-  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+"<div data-slot="root" class="w-full relative">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
     <!--v-if-->
-    <thead class="">
-      <tr class="">
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Free</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
             <!--v-if--></span>
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Contact us</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
               <!--v-if-->
             </button></div>
         </th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Free</div>
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
         <!--v-if--></span>
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Contact us</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
@@ -3488,275 +3488,275 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
 `;
 
 exports[`PricingTable > renders with ui correctly 1`] = `
-"<div class="w-full relative">
-  <table class="w-full border-separate border-spacing-x-0 hidden md:table table-auto">
+"<div data-slot="root" class="w-full relative">
+  <table data-slot="table" class="w-full border-separate border-spacing-x-0 hidden md:table table-auto">
     <!--v-if-->
-    <thead class="">
-      <tr class="">
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Free</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
             <!--v-if--></span>
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Contact us</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
               <!--v-if-->
             </button></div>
         </th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Free</div>
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
         <!--v-if--></span>
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Contact us</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-        </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-        </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-        </div>
-      </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-primary"></svg></div>
-        </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
+        </div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
+        </div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
+        </div>
+      </div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tierFeatureIcon" class="size-5 shrink-0 text-primary"></svg></div>
+        </div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
diff --git a/test/components/__snapshots__/PricingTable.spec.ts.snap b/test/components/__snapshots__/PricingTable.spec.ts.snap
index 2c68a17a65..ab90d7e163 100644
--- a/test/components/__snapshots__/PricingTable.spec.ts.snap
+++ b/test/components/__snapshots__/PricingTable.spec.ts.snap
@@ -1,275 +1,275 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PricingTable > renders with as correctly 1`] = `
-"<section class="w-full relative">
-  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+"<section data-slot="root" class="w-full relative">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
     <!--v-if-->
-    <thead class="">
-      <tr class="">
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Free</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
             <!--v-if--></span>
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Contact us</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
               <!--v-if-->
             </button></div>
         </th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Free</div>
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
         <!--v-if--></span>
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Contact us</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
@@ -278,275 +278,275 @@ exports[`PricingTable > renders with as correctly 1`] = `
 `;
 
 exports[`PricingTable > renders with caption correctly 1`] = `
-"<div class="w-full relative">
-  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
-    <caption class="sr-only">Caption</caption>
-    <thead class="">
-      <tr class="">
+"<div data-slot="root" class="w-full relative">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+    <caption data-slot="caption" class="sr-only">Caption</caption>
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Free</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
             <!--v-if--></span>
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Contact us</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
               <!--v-if-->
             </button></div>
         </th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Free</div>
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
         <!--v-if--></span>
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Contact us</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
@@ -555,275 +555,275 @@ exports[`PricingTable > renders with caption correctly 1`] = `
 `;
 
 exports[`PricingTable > renders with caption slot correctly 1`] = `
-"<div class="w-full relative">
-  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
-    <caption class="sr-only">Caption slot</caption>
-    <thead class="">
-      <tr class="">
+"<div data-slot="root" class="w-full relative">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+    <caption data-slot="caption" class="sr-only">Caption slot</caption>
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Free</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
             <!--v-if--></span>
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Contact us</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
               <!--v-if-->
             </button></div>
         </th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Free</div>
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
         <!--v-if--></span>
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Contact us</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
@@ -832,275 +832,275 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
 `;
 
 exports[`PricingTable > renders with class correctly 1`] = `
-"<div class="w-full relative max-w-sm">
-  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+"<div data-slot="root" class="w-full relative max-w-sm">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
     <!--v-if-->
-    <thead class="">
-      <tr class="">
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Free</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
             <!--v-if--></span>
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Contact us</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
               <!--v-if-->
             </button></div>
         </th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Free</div>
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
         <!--v-if--></span>
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Contact us</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
@@ -1109,185 +1109,185 @@ exports[`PricingTable > renders with class correctly 1`] = `
 `;
 
 exports[`PricingTable > renders with tier slot correctly 1`] = `
-"<div class="w-full relative">
-  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+"<div data-slot="root" class="w-full relative">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
     <!--v-if-->
-    <thead class="">
-      <tr class="">
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">Tier slot</th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">Tier slot</th>
-        <th scope="col" class="p-6 text-left font-normal">Tier slot</th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">Tier slot</th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">Tier slot</th>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">Tier slot</th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">Tier slot<div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">Tier slot<div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">Tier slot<div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">Tier slot<div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">Tier slot<div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">Tier slot<div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
@@ -1296,269 +1296,269 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
 `;
 
 exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
-"<div class="w-full relative">
-  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+"<div data-slot="root" class="w-full relative">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
     <!--v-if-->
-    <thead class="">
-      <tr class="">
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Free</div>Tier badge slot
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>Tier badge slot
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Pro</div>Tier badge slot
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div>Tier badge slot
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Enterprise</div>Tier badge slot
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>Tier badge slot
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Contact us</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
               <!--v-if-->
             </button></div>
         </th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Free</div>Tier badge slot
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>Tier badge slot
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Pro</div>Tier badge slot
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div>Tier badge slot
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Enterprise</div>Tier badge slot
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>Tier badge slot
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Contact us</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
@@ -1567,275 +1567,275 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
 `;
 
 exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
-"<div class="w-full relative">
-  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+"<div data-slot="root" class="w-full relative">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
     <!--v-if-->
-    <thead class="">
-      <tr class="">
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Free</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-            <div class="flex flex-col justify-between min-w-0">Tier billing slot</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
             <!--v-if--></span>
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div class="flex flex-col justify-between min-w-0">Tier billing slot</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-            <div class="flex flex-col justify-between min-w-0">Tier billing slot</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Contact us</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
               <!--v-if-->
             </button></div>
         </th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Free</div>
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
-        <div class="flex flex-col justify-between min-w-0">Tier billing slot</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
         <!--v-if--></span>
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div class="flex flex-col justify-between min-w-0">Tier billing slot</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
-        <div class="flex flex-col justify-between min-w-0">Tier billing slot</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0">Tier billing slot</div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Contact us</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
@@ -1844,257 +1844,257 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
 `;
 
 exports[`PricingTable > renders with tier-button slot correctly 1`] = `
-"<div class="w-full relative">
-  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+"<div data-slot="root" class="w-full relative">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
     <!--v-if-->
-    <thead class="">
-      <tr class="">
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Free</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
             <!--v-if-->
           </div>
-          <div class="mt-6">Tier button slot</div>
+          <div data-slot="tierButton" class="mt-6">Tier button slot</div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
             <!--v-if--></span>
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
           </div>
-          <div class="mt-6">Tier button slot</div>
+          <div data-slot="tierButton" class="mt-6">Tier button slot</div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
             <!--v-if-->
           </div>
-          <div class="mt-6">Tier button slot</div>
+          <div data-slot="tierButton" class="mt-6">Tier button slot</div>
         </th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Free</div>
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
         <!--v-if-->
       </div>
-      <div class="mt-6">Tier button slot</div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="tierButton" class="mt-6">Tier button slot</div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
         <!--v-if--></span>
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
       </div>
-      <div class="mt-6">Tier button slot</div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="tierButton" class="mt-6">Tier button slot</div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
         <!--v-if-->
       </div>
-      <div class="mt-6">Tier button slot</div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="tierButton" class="mt-6">Tier button slot</div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
@@ -2103,275 +2103,275 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
 `;
 
 exports[`PricingTable > renders with tier-description slot correctly 1`] = `
-"<div class="w-full relative">
-  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+"<div data-slot="root" class="w-full relative">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
     <!--v-if-->
-    <thead class="">
-      <tr class="">
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Free</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">Tier description slot</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
             <!--v-if--></span>
           </div>
-          <div class="text-sm font-normal text-muted mt-1">Tier description slot</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">Tier description slot</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Contact us</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
               <!--v-if-->
             </button></div>
         </th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Free</div>
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">Tier description slot</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
         <!--v-if--></span>
       </div>
-      <div class="text-sm font-normal text-muted mt-1">Tier description slot</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">Tier description slot</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">Tier description slot</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Contact us</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
@@ -2380,275 +2380,275 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
 `;
 
 exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
-"<div class="w-full relative">
-  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+"<div data-slot="root" class="w-full relative">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
     <!--v-if-->
-    <thead class="">
-      <tr class="">
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Free</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div class="flex items-center gap-1 mt-4">
-            <div class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+            <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
             <!--v-if--></span>
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div class="flex items-center gap-1 mt-4">
-            <div class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+            <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div class="flex items-center gap-1 mt-4">
-            <div class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+            <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Contact us</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
               <!--v-if-->
             </button></div>
         </th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Free</div>
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div class="flex items-center gap-1 mt-4">
-        <div class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+        <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
         <!--v-if--></span>
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div class="flex items-center gap-1 mt-4">
-        <div class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+        <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div class="flex items-center gap-1 mt-4">
-        <div class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
+        <div data-slot="tierDiscount" class="text-muted line-through text-xl sm:text-2xl">Tier discount slot</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Contact us</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
@@ -2657,275 +2657,275 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
 `;
 
 exports[`PricingTable > renders with tier-price slot correctly 1`] = `
-"<div class="w-full relative">
-  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+"<div data-slot="root" class="w-full relative">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
     <!--v-if-->
-    <thead class="">
-      <tr class="">
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Free</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
             <!--v-if--></span>
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
-            <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Contact us</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
               <!--v-if-->
             </button></div>
         </th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Free</div>
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
         <!--v-if--></span>
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
-        <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Tier price slot</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Contact us</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
@@ -2934,275 +2934,275 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
 `;
 
 exports[`PricingTable > renders with tier-title slot correctly 1`] = `
-"<div class="w-full relative">
-  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+"<div data-slot="root" class="w-full relative">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
     <!--v-if-->
-    <thead class="">
-      <tr class="">
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Tier title slot</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Tier title slot</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
             <!--v-if--></span>
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Tier title slot</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Contact us</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
               <!--v-if-->
             </button></div>
         </th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Tier title slot</div>
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Tier title slot</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
         <!--v-if--></span>
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Tier title slot</div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Contact us</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
@@ -3211,275 +3211,275 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
 `;
 
 exports[`PricingTable > renders with tiers and sections correctly 1`] = `
-"<div class="w-full relative">
-  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+"<div data-slot="root" class="w-full relative">
+  <table data-slot="table" class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
     <!--v-if-->
-    <thead class="">
-      <tr class="">
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Free</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
             <!--v-if--></span>
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Contact us</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
               <!--v-if-->
             </button></div>
         </th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Free</div>
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
         <!--v-if--></span>
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Contact us</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
@@ -3488,275 +3488,275 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
 `;
 
 exports[`PricingTable > renders with ui correctly 1`] = `
-"<div class="w-full relative">
-  <table class="w-full border-separate border-spacing-x-0 hidden md:table table-auto">
+"<div data-slot="root" class="w-full relative">
+  <table data-slot="table" class="w-full border-separate border-spacing-x-0 hidden md:table table-auto">
     <!--v-if-->
-    <thead class="">
-      <tr class="">
+    <thead data-slot="thead" class="">
+      <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Free</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal bg-elevated/50 border-x border-t border-default rounded-t-lg">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
             <!--v-if--></span>
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-            <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+            <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-              <!--v-if--><span class="truncate">Get started</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Get started</span>
               <!--v-if-->
             </button></div>
         </th>
-        <th scope="col" class="p-6 text-left font-normal">
-          <div class="flex items-center gap-3">
-            <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+        <th scope="col" data-slot="tier" class="p-6 text-left font-normal">
+          <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+            <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
             <!--v-if-->
           </div>
-          <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-          <div class="flex items-center gap-1 mt-4">
+          <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+          <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
             <!--v-if-->
-            <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+            <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
             <!--v-if-->
           </div>
-          <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-              <!--v-if--><span class="truncate">Contact us</span>
+          <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+              <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
               <!--v-if-->
             </button></div>
         </th>
       </tr>
     </thead>
-    <tbody class="">
-      <tr class="">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Features</div>
+    <tbody data-slot="tbody" class="">
+      <tr data-slot="tr" class="">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited projects</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited members</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Unlimited integrations</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
-      <tr class="*:pt-8">
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="font-semibold text-sm text-highlighted">Support</div>
+      <tr data-slot="tr" class="*:pt-8">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
-        <td class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default"></td>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">Email support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
       </tr>
       <tr>
-        <th scope="row" class="py-4 font-normal text-left border-b border-default">
-          <div class="text-sm text-default">24/7 support</div>
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b bg-elevated/50 border-x border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </td>
-        <td class="px-6 py-4 text-center border-b border-default">
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+        <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </td>
       </tr>
     </tbody>
   </table>
-  <ul class="md:hidden flex flex-col gap-6 w-full">
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Free</div>
+  <ul data-slot="list" class="md:hidden flex flex-col gap-6 w-full">
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For personal and small teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$0</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">4</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">4</div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">1</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">1</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:minus size-5 shrink-0" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Pro</div><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span class="truncate">Most popular</span>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg bg-elevated/50">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
         <!--v-if--></span>
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For medium and large teams</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
-        <div class="flex flex-col justify-between min-w-0"><span class="text-toned truncate text-xs font-medium">billed annually</span><span class="text-muted truncate text-xs font-medium">/month</span></div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">$9</div>
+        <div data-slot="tierBilling" class="flex flex-col justify-between min-w-0"><span data-slot="tierBillingPeriod" class="text-toned truncate text-xs font-medium">billed annually</span><span data-slot="tierBillingCycle" class="text-muted truncate text-xs font-medium">/month</span></div>
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span class="truncate">Get started</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Get started</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">10</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">10</div>
         </div>
       </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
         </div>
       </div>
     </li>
-    <li class="p-6 flex flex-col border border-default rounded-lg">
-      <div class="flex items-center gap-3">
-        <div class="text-lg font-semibold text-highlighted">Enterprise</div>
+    <li data-slot="item" class="p-6 flex flex-col border border-default rounded-lg">
+      <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
+        <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
         <!--v-if-->
       </div>
-      <div class="text-sm font-normal text-muted mt-1">For large enterprises</div>
-      <div class="flex items-center gap-1 mt-4">
+      <div data-slot="tierDescription" class="text-sm font-normal text-muted mt-1">For large enterprises</div>
+      <div data-slot="tierPriceWrapper" class="flex items-center gap-1 mt-4">
         <!--v-if-->
-        <div class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
+        <div data-slot="tierPrice" class="text-highlighted text-3xl sm:text-4xl font-semibold">Custom</div>
         <!--v-if-->
       </div>
-      <div class="mt-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
-          <!--v-if--><span class="truncate">Contact us</span>
+      <div data-slot="tierButton" class="mt-6"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Contact us</span>
           <!--v-if-->
         </button></div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Features</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited projects</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-        </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited members</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-        </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Unlimited integrations</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-        </div>
-      </div>
-      <div class="mt-6 flex flex-col gap-2">
-        <div class="font-semibold text-sm text-highlighted">Support</div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">Email support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true"></span></div>
-        </div>
-        <div class="flex items-center justify-between gap-1">
-          <div class="text-sm text-default">24/7 support</div>
-          <div class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
+        </div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
+        </div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
+        </div>
+      </div>
+      <div data-slot="section" class="mt-6 flex flex-col gap-2">
+        <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5"><span class="iconify i-lucide:circle-check size-5 shrink-0 text-primary" aria-hidden="true" data-slot="tierFeatureIcon"></span></div>
+        </div>
+        <div data-slot="feature" class="flex items-center justify-between gap-1">
+          <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
+          <div data-slot="featureValue" class="text-sm text-muted flex justify-center min-w-5">Enterprise</div>
         </div>
       </div>
     </li>
diff --git a/test/components/__snapshots__/Progress-vue.spec.ts.snap b/test/components/__snapshots__/Progress-vue.spec.ts.snap
index b39ad4a3f0..dc119d5c0d 100644
--- a/test/components/__snapshots__/Progress-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Progress-vue.spec.ts.snap
@@ -1,242 +1,242 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Progress > renders with animation carousel correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with animation carousel-inverse correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with animation elastic correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with animation swing correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with as correctly 1`] = `
-"<section data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<section data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </section>"
 `;
 
 exports[`Progress > renders with class correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 flex flex-col w-48">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 flex flex-col w-48">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with color neutral correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-inverted data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-inverted data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with max correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
-  <div class="flex text-dimmed transition-[width] duration-200 text-sm flex-row items-center justify-end min-w-fit" style="width: 50%;">50% </div>
-  <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
+  <div data-slot="status" class="flex text-dimmed transition-[width] duration-200 text-sm flex-row items-center justify-end min-w-fit" style="width: 50%;">50% </div>
+  <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
-  <div class="grid items-end text-primary text-sm">
-    <div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Waiting...</div>
-    <div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Cloning...</div>
-    <div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-100">Migrating...</div>
-    <div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Deploying...</div>
-    <div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Done!</div>
+  <div data-slot="steps" class="grid items-end text-primary text-sm">
+    <div data-slot="step" class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Waiting...</div>
+    <div data-slot="step" class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Cloning...</div>
+    <div data-slot="step" class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-100">Migrating...</div>
+    <div data-slot="step" class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Deploying...</div>
+    <div data-slot="step" class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Done!</div>
   </div>
 </div>"
 `;
 
 exports[`Progress > renders with max inverted correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
-  <div class="flex text-dimmed transition-[width] duration-200 text-sm items-center justify-end min-w-fit self-end flex-row-reverse" style="width: 50%;">50% </div>
-  <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
+  <div data-slot="status" class="flex text-dimmed transition-[width] duration-200 text-sm items-center justify-end min-w-fit self-end flex-row-reverse" style="width: 50%;">50% </div>
+  <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
   </div>
-  <div class="grid items-end text-primary text-sm">
-    <div class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Waiting...</div>
-    <div class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Cloning...</div>
-    <div class="truncate row-start-1 col-start-1 transition-opacity opacity-100 text-start">Migrating...</div>
-    <div class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Deploying...</div>
-    <div class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Done!</div>
+  <div data-slot="steps" class="grid items-end text-primary text-sm">
+    <div data-slot="step" class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Waiting...</div>
+    <div data-slot="step" class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Cloning...</div>
+    <div data-slot="step" class="truncate row-start-1 col-start-1 transition-opacity opacity-100 text-start">Migrating...</div>
+    <div data-slot="step" class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Deploying...</div>
+    <div data-slot="step" class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Done!</div>
   </div>
 </div>"
 `;
 
 exports[`Progress > renders with modelValue correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with orientation horizontal correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with orientation vertical correctly 1`] = `
-"<div data-orientation="vertical" class="gap-2 h-full flex flex-row-reverse">
+"<div data-orientation="vertical" data-slot="root" class="gap-2 h-full flex flex-row-reverse">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented h-full w-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented h-full w-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with size 2xl correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-5" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-5" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with size 2xs correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-px" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-px" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with size lg correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-3" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-3" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with size md correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with size sm correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with size xl correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-4" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-4" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with size xs correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-0.5" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-0.5" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with status correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
-  <div class="flex text-dimmed transition-[width] duration-200 text-sm flex-row items-center justify-end min-w-fit" style="width: 50%;">50% </div>
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
+  <div data-slot="status" class="flex text-dimmed transition-[width] duration-200 text-sm flex-row items-center justify-end min-w-fit" style="width: 50%;">50% </div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with status inverted correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
-  <div class="flex text-dimmed transition-[width] duration-200 text-sm items-center justify-end min-w-fit self-end flex-row-reverse" style="width: 50%;">50% </div>
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
+  <div data-slot="status" class="flex text-dimmed transition-[width] duration-200 text-sm items-center justify-end min-w-fit self-end flex-row-reverse" style="width: 50%;">50% </div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with status slot correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with ui correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full w-full h-2 bg-default" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full w-full h-2 bg-default" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
diff --git a/test/components/__snapshots__/Progress.spec.ts.snap b/test/components/__snapshots__/Progress.spec.ts.snap
index b39ad4a3f0..dc119d5c0d 100644
--- a/test/components/__snapshots__/Progress.spec.ts.snap
+++ b/test/components/__snapshots__/Progress.spec.ts.snap
@@ -1,242 +1,242 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Progress > renders with animation carousel correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with animation carousel-inverse correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with animation elastic correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with animation swing correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with as correctly 1`] = `
-"<section data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<section data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </section>"
 `;
 
 exports[`Progress > renders with class correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 flex flex-col w-48">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 flex flex-col w-48">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with color neutral correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-inverted data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-inverted data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with max correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
-  <div class="flex text-dimmed transition-[width] duration-200 text-sm flex-row items-center justify-end min-w-fit" style="width: 50%;">50% </div>
-  <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
+  <div data-slot="status" class="flex text-dimmed transition-[width] duration-200 text-sm flex-row items-center justify-end min-w-fit" style="width: 50%;">50% </div>
+  <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
-  <div class="grid items-end text-primary text-sm">
-    <div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Waiting...</div>
-    <div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Cloning...</div>
-    <div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-100">Migrating...</div>
-    <div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Deploying...</div>
-    <div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Done!</div>
+  <div data-slot="steps" class="grid items-end text-primary text-sm">
+    <div data-slot="step" class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Waiting...</div>
+    <div data-slot="step" class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Cloning...</div>
+    <div data-slot="step" class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-100">Migrating...</div>
+    <div data-slot="step" class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Deploying...</div>
+    <div data-slot="step" class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Done!</div>
   </div>
 </div>"
 `;
 
 exports[`Progress > renders with max inverted correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
-  <div class="flex text-dimmed transition-[width] duration-200 text-sm items-center justify-end min-w-fit self-end flex-row-reverse" style="width: 50%;">50% </div>
-  <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
+  <div data-slot="status" class="flex text-dimmed transition-[width] duration-200 text-sm items-center justify-end min-w-fit self-end flex-row-reverse" style="width: 50%;">50% </div>
+  <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
   </div>
-  <div class="grid items-end text-primary text-sm">
-    <div class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Waiting...</div>
-    <div class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Cloning...</div>
-    <div class="truncate row-start-1 col-start-1 transition-opacity opacity-100 text-start">Migrating...</div>
-    <div class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Deploying...</div>
-    <div class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Done!</div>
+  <div data-slot="steps" class="grid items-end text-primary text-sm">
+    <div data-slot="step" class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Waiting...</div>
+    <div data-slot="step" class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Cloning...</div>
+    <div data-slot="step" class="truncate row-start-1 col-start-1 transition-opacity opacity-100 text-start">Migrating...</div>
+    <div data-slot="step" class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Deploying...</div>
+    <div data-slot="step" class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Done!</div>
   </div>
 </div>"
 `;
 
 exports[`Progress > renders with modelValue correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with orientation horizontal correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with orientation vertical correctly 1`] = `
-"<div data-orientation="vertical" class="gap-2 h-full flex flex-row-reverse">
+"<div data-orientation="vertical" data-slot="root" class="gap-2 h-full flex flex-row-reverse">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented h-full w-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented h-full w-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with size 2xl correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-5" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-5" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with size 2xs correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-px" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-px" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with size lg correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-3" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-3" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with size md correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with size sm correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with size xl correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-4" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-4" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with size xs correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-0.5" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-0.5" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with status correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
-  <div class="flex text-dimmed transition-[width] duration-200 text-sm flex-row items-center justify-end min-w-fit" style="width: 50%;">50% </div>
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
+  <div data-slot="status" class="flex text-dimmed transition-[width] duration-200 text-sm flex-row items-center justify-end min-w-fit" style="width: 50%;">50% </div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with status inverted correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
-  <div class="flex text-dimmed transition-[width] duration-200 text-sm items-center justify-end min-w-fit self-end flex-row-reverse" style="width: 50%;">50% </div>
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
+  <div data-slot="status" class="flex text-dimmed transition-[width] duration-200 text-sm items-center justify-end min-w-fit self-end flex-row-reverse" style="width: 50%;">50% </div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with status slot correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Progress > renders with ui correctly 1`] = `
-"<div data-orientation="horizontal" class="gap-2 w-full flex flex-col">
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full w-full h-2 bg-default" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full w-full h-2 bg-default" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
diff --git a/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap b/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap
index 68bb7756d2..9141daf322 100644
--- a/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap
+++ b/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap
@@ -1,33 +1,33 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`RadioGroup > renders with ariaLabel correctly 1`] = `
-"<div id="v-0" class="relative" aria-label="Aria label" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" aria-label="Aria label" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -37,33 +37,33 @@ exports[`RadioGroup > renders with ariaLabel correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with as correctly 1`] = `
-"<section id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<section id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -73,33 +73,33 @@ exports[`RadioGroup > renders with as correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with class correctly 1`] = `
-"<div id="v-0" class="absolute" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="absolute" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -109,32 +109,32 @@ exports[`RadioGroup > renders with class correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with defaultValue correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -144,34 +144,34 @@ exports[`RadioGroup > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with description correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
-        <p class="text-muted">Description 0</p>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+        <p data-slot="description" class="text-muted">Description 0</p>
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
-        <p class="text-muted">Description 1</p>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+        <p data-slot="description" class="text-muted">Description 1</p>
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
-        <p class="text-muted">Description 2</p>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+        <p data-slot="description" class="text-muted">Description 2</p>
       </div>
     </div>
   </fieldset>
@@ -180,33 +180,33 @@ exports[`RadioGroup > renders with description correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with description slot correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Description slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Description slot</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Description slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Description slot</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Description slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Description slot</label>
         <!--v-if-->
       </div>
     </div>
@@ -216,34 +216,34 @@ exports[`RadioGroup > renders with description slot correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with descriptionKey correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
-        <p class="text-muted">1</p>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+        <p data-slot="description" class="text-muted">1</p>
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
-        <p class="text-muted">2</p>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+        <p data-slot="description" class="text-muted">2</p>
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
-        <p class="text-muted">3</p>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+        <p data-slot="description" class="text-muted">3</p>
       </div>
     </div>
   </fieldset>
@@ -252,33 +252,33 @@ exports[`RadioGroup > renders with descriptionKey correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with disabled correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="-1" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" data-disabled="" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="-1" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" data-disabled="" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-disabled="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0:1" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="1" aria-label="1">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-disabled="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0:1" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default cursor-not-allowed opacity-75">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default cursor-not-allowed opacity-75">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-disabled="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0:2" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-disabled="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0:2" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default cursor-not-allowed opacity-75">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default cursor-not-allowed opacity-75">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-disabled="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0:3" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-disabled="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0:3" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default cursor-not-allowed opacity-75">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default cursor-not-allowed opacity-75">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -288,32 +288,32 @@ exports[`RadioGroup > renders with disabled correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with horizontal variant card correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="horizontal" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-row gap-y-1">
-    <!--v-if--><label class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="horizontal" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-row gap-y-1">
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
     </label>
@@ -323,32 +323,32 @@ exports[`RadioGroup > renders with horizontal variant card correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with horizontal variant list correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="horizontal" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-row gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="horizontal" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-row gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -358,32 +358,32 @@ exports[`RadioGroup > renders with horizontal variant list correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with horizontal variant table correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="horizontal" aria-required="false">
-  <fieldset class="flex flex-row gap-0 -space-x-px">
-    <!--v-if--><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="horizontal" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex flex-row gap-0 -space-x-px">
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
     </label>
@@ -393,32 +393,32 @@ exports[`RadioGroup > renders with horizontal variant table correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with indicator end correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row-reverse text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
+    <div data-slot="item" class="flex items-start flex-row-reverse text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full me-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full me-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row-reverse text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row-reverse text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full me-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full me-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row-reverse text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row-reverse text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full me-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full me-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -428,32 +428,32 @@ exports[`RadioGroup > renders with indicator end correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with indicator hidden correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
+    <div data-slot="item" class="flex items-start text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full text-center"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full text-center"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full text-center"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full text-center"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full text-center"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full text-center"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -463,32 +463,32 @@ exports[`RadioGroup > renders with indicator hidden correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with indicator start correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -498,33 +498,33 @@ exports[`RadioGroup > renders with indicator start correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with items correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -534,33 +534,33 @@ exports[`RadioGroup > renders with items correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with label slot correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
     </div>
@@ -570,33 +570,33 @@ exports[`RadioGroup > renders with label slot correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with labelKey correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">3</label>
         <!--v-if-->
       </div>
     </div>
@@ -606,33 +606,33 @@ exports[`RadioGroup > renders with labelKey correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with legend slot correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Legend slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Legend slot</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Legend slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Legend slot</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Legend slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Legend slot</label>
         <!--v-if-->
       </div>
     </div>
@@ -642,32 +642,32 @@ exports[`RadioGroup > renders with legend slot correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with modelValue correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -677,32 +677,32 @@ exports[`RadioGroup > renders with modelValue correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with neutral variant card correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span>
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
     </label>
@@ -712,32 +712,32 @@ exports[`RadioGroup > renders with neutral variant card correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with neutral variant list correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span>
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -747,32 +747,32 @@ exports[`RadioGroup > renders with neutral variant list correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with neutral variant table correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex flex-col gap-0 -space-y-px">
-    <!--v-if--><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span>
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex flex-col gap-0 -space-y-px">
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
     </label>
@@ -782,32 +782,32 @@ exports[`RadioGroup > renders with neutral variant table correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with primary variant card correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
     </label>
@@ -817,32 +817,32 @@ exports[`RadioGroup > renders with primary variant card correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with primary variant list correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -852,32 +852,32 @@ exports[`RadioGroup > renders with primary variant list correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with primary variant table correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex flex-col gap-0 -space-y-px">
-    <!--v-if--><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex flex-col gap-0 -space-y-px">
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
     </label>
@@ -887,33 +887,33 @@ exports[`RadioGroup > renders with primary variant table correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with required correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="true">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <legend class="mb-1 block font-medium text-default text-sm after:content-['*'] after:ms-0.5 after:text-error">Legend</legend>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="1" aria-label="1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="true">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
+    <legend data-slot="legend" class="mb-1 block font-medium text-default text-sm after:content-['*'] after:ms-0.5 after:text-error">Legend</legend>
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="1" aria-label="1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -923,32 +923,32 @@ exports[`RadioGroup > renders with required correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with size lg correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -958,32 +958,32 @@ exports[`RadioGroup > renders with size lg correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with size md correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -993,32 +993,32 @@ exports[`RadioGroup > renders with size md correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with size sm correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-0.5">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-0.5">
     <!--v-if-->
-    <div class="flex items-start flex-row text-xs">
-      <div class="flex items-center h-4"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1"></span>
+    <div data-slot="item" class="flex items-start flex-row text-xs">
+      <div data-slot="container" class="flex items-center h-4"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-xs">
-      <div class="flex items-center h-4"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-xs">
+      <div data-slot="container" class="flex items-center h-4"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-xs">
-      <div class="flex items-center h-4"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-xs">
+      <div data-slot="container" class="flex items-center h-4"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1028,32 +1028,32 @@ exports[`RadioGroup > renders with size sm correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with size xl correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1.5">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1.5">
     <!--v-if-->
-    <div class="flex items-start flex-row text-base">
-      <div class="flex items-center h-6"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-2"></span>
+    <div data-slot="item" class="flex items-start flex-row text-base">
+      <div data-slot="container" class="flex items-center h-6"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-2"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-base">
-      <div class="flex items-center h-6"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-base">
+      <div data-slot="container" class="flex items-center h-6"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-base">
-      <div class="flex items-center h-6"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-base">
+      <div data-slot="container" class="flex items-center h-6"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1063,32 +1063,32 @@ exports[`RadioGroup > renders with size xl correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with size xs correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-0.5">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-0.5">
     <!--v-if-->
-    <div class="flex items-start flex-row text-xs">
-      <div class="flex items-center h-4"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1"></span>
+    <div data-slot="item" class="flex items-start flex-row text-xs">
+      <div data-slot="container" class="flex items-center h-4"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-xs">
-      <div class="flex items-center h-4"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-xs">
+      <div data-slot="container" class="flex items-center h-4"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-xs">
-      <div class="flex items-center h-4"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-xs">
+      <div data-slot="container" class="flex items-center h-4"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1098,33 +1098,33 @@ exports[`RadioGroup > renders with size xs correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with ui correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-4"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-4"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-4"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-4"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-4"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-4"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1134,33 +1134,33 @@ exports[`RadioGroup > renders with ui correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with valueKey correctly 1`] = `
-"<div id="v-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:Option 1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="Option 1" aria-label="Option 1">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:Option 1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="Option 1" aria-label="Option 1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:Option 1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:Option 1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:Option 2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="Option 2" aria-label="Option 2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:Option 2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="Option 2" aria-label="Option 2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:Option 2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:Option 2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:Option 3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="Option 3" aria-label="Option 3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:Option 3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="Option 3" aria-label="Option 3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0:Option 3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:Option 3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
diff --git a/test/components/__snapshots__/RadioGroup.spec.ts.snap b/test/components/__snapshots__/RadioGroup.spec.ts.snap
index 30710f2579..dd5575b1f2 100644
--- a/test/components/__snapshots__/RadioGroup.spec.ts.snap
+++ b/test/components/__snapshots__/RadioGroup.spec.ts.snap
@@ -1,33 +1,33 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`RadioGroup > renders with ariaLabel correctly 1`] = `
-"<div id="v-0-0" class="relative" aria-label="Aria label" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" aria-label="Aria label" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -37,33 +37,33 @@ exports[`RadioGroup > renders with ariaLabel correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with as correctly 1`] = `
-"<section id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<section id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -73,33 +73,33 @@ exports[`RadioGroup > renders with as correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with class correctly 1`] = `
-"<div id="v-0-0" class="absolute" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="absolute" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -109,32 +109,32 @@ exports[`RadioGroup > renders with class correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with defaultValue correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -144,34 +144,34 @@ exports[`RadioGroup > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with description correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
-        <p class="text-muted">Description 0</p>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+        <p data-slot="description" class="text-muted">Description 0</p>
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
-        <p class="text-muted">Description 1</p>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+        <p data-slot="description" class="text-muted">Description 1</p>
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
-        <p class="text-muted">Description 2</p>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+        <p data-slot="description" class="text-muted">Description 2</p>
       </div>
     </div>
   </fieldset>
@@ -180,33 +180,33 @@ exports[`RadioGroup > renders with description correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with description slot correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Description slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Description slot</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Description slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Description slot</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Description slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Description slot</label>
         <!--v-if-->
       </div>
     </div>
@@ -216,34 +216,34 @@ exports[`RadioGroup > renders with description slot correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with descriptionKey correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
-        <p class="text-muted">1</p>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+        <p data-slot="description" class="text-muted">1</p>
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
-        <p class="text-muted">2</p>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+        <p data-slot="description" class="text-muted">2</p>
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
-        <p class="text-muted">3</p>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+        <p data-slot="description" class="text-muted">3</p>
       </div>
     </div>
   </fieldset>
@@ -252,33 +252,33 @@ exports[`RadioGroup > renders with descriptionKey correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with disabled correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="-1" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" data-disabled="" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="-1" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" data-disabled="" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-disabled="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0-0:1" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="1" aria-label="1">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-disabled="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0-0:1" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default cursor-not-allowed opacity-75">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default cursor-not-allowed opacity-75">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-disabled="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0-0:2" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-disabled="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0-0:2" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default cursor-not-allowed opacity-75">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default cursor-not-allowed opacity-75">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-disabled="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0-0:3" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-disabled="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0-0:3" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default cursor-not-allowed opacity-75">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default cursor-not-allowed opacity-75">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -288,32 +288,32 @@ exports[`RadioGroup > renders with disabled correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with horizontal variant card correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="horizontal" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-row gap-y-1">
-    <!--v-if--><label class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="horizontal" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-row gap-y-1">
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
     </label>
@@ -323,32 +323,32 @@ exports[`RadioGroup > renders with horizontal variant card correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with horizontal variant list correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="horizontal" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-row gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="horizontal" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-row gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -358,32 +358,32 @@ exports[`RadioGroup > renders with horizontal variant list correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with horizontal variant table correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="horizontal" aria-required="false">
-  <fieldset class="flex flex-row gap-0 -space-x-px">
-    <!--v-if--><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="horizontal" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex flex-row gap-0 -space-x-px">
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
     </label>
@@ -393,32 +393,32 @@ exports[`RadioGroup > renders with horizontal variant table correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with indicator end correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row-reverse text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
+    <div data-slot="item" class="flex items-start flex-row-reverse text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full me-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full me-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row-reverse text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row-reverse text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full me-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full me-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row-reverse text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row-reverse text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full me-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full me-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -428,32 +428,32 @@ exports[`RadioGroup > renders with indicator end correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with indicator hidden correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
+    <div data-slot="item" class="flex items-start text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full text-center"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full text-center"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full text-center"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full text-center"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full text-center"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full text-center"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -463,32 +463,32 @@ exports[`RadioGroup > renders with indicator hidden correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with indicator start correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -498,33 +498,33 @@ exports[`RadioGroup > renders with indicator start correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with items correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -534,33 +534,33 @@ exports[`RadioGroup > renders with items correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with label slot correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
     </div>
@@ -570,33 +570,33 @@ exports[`RadioGroup > renders with label slot correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with labelKey correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">3</label>
         <!--v-if-->
       </div>
     </div>
@@ -606,33 +606,33 @@ exports[`RadioGroup > renders with labelKey correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with legend slot correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Legend slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Legend slot</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Legend slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Legend slot</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Legend slot</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Legend slot</label>
         <!--v-if-->
       </div>
     </div>
@@ -642,32 +642,32 @@ exports[`RadioGroup > renders with legend slot correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with modelValue correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -677,32 +677,32 @@ exports[`RadioGroup > renders with modelValue correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with neutral variant card correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span>
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
     </label>
@@ -712,32 +712,32 @@ exports[`RadioGroup > renders with neutral variant card correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with neutral variant list correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span>
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -747,32 +747,32 @@ exports[`RadioGroup > renders with neutral variant list correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with neutral variant table correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex flex-col gap-0 -space-y-px">
-    <!--v-if--><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span>
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex flex-col gap-0 -space-y-px">
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
     </label>
@@ -782,32 +782,32 @@ exports[`RadioGroup > renders with neutral variant table correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with primary variant card correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
     </label>
@@ -817,32 +817,32 @@ exports[`RadioGroup > renders with primary variant card correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with primary variant list correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -852,32 +852,32 @@ exports[`RadioGroup > renders with primary variant list correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with primary variant table correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex flex-col gap-0 -space-y-px">
-    <!--v-if--><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex flex-col gap-0 -space-y-px">
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
     </label>
@@ -887,33 +887,33 @@ exports[`RadioGroup > renders with primary variant table correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with required correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="true">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <legend class="mb-1 block font-medium text-default text-sm after:content-['*'] after:ms-0.5 after:text-error">Legend</legend>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="1" aria-label="1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="true">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
+    <legend data-slot="legend" class="mb-1 block font-medium text-default text-sm after:content-['*'] after:ms-0.5 after:text-error">Legend</legend>
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="1" aria-label="1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -923,32 +923,32 @@ exports[`RadioGroup > renders with required correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with size lg correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -958,32 +958,32 @@ exports[`RadioGroup > renders with size lg correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with size md correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -993,32 +993,32 @@ exports[`RadioGroup > renders with size md correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with size sm correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-0.5">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-0.5">
     <!--v-if-->
-    <div class="flex items-start flex-row text-xs">
-      <div class="flex items-center h-4"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1"></span>
+    <div data-slot="item" class="flex items-start flex-row text-xs">
+      <div data-slot="container" class="flex items-center h-4"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-xs">
-      <div class="flex items-center h-4"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-xs">
+      <div data-slot="container" class="flex items-center h-4"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-xs">
-      <div class="flex items-center h-4"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-xs">
+      <div data-slot="container" class="flex items-center h-4"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1028,32 +1028,32 @@ exports[`RadioGroup > renders with size sm correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with size xl correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1.5">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1.5">
     <!--v-if-->
-    <div class="flex items-start flex-row text-base">
-      <div class="flex items-center h-6"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-2"></span>
+    <div data-slot="item" class="flex items-start flex-row text-base">
+      <div data-slot="container" class="flex items-center h-6"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-2"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-base">
-      <div class="flex items-center h-6"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-base">
+      <div data-slot="container" class="flex items-center h-6"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-base">
-      <div class="flex items-center h-6"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-base">
+      <div data-slot="container" class="flex items-center h-6"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1063,32 +1063,32 @@ exports[`RadioGroup > renders with size xl correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with size xs correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-0.5">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-0.5">
     <!--v-if-->
-    <div class="flex items-start flex-row text-xs">
-      <div class="flex items-center h-4"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1"></span>
+    <div data-slot="item" class="flex items-start flex-row text-xs">
+      <div data-slot="container" class="flex items-center h-4"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1"></span>
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-xs">
-      <div class="flex items-center h-4"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-xs">
+      <div data-slot="container" class="flex items-center h-4"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-xs">
-      <div class="flex items-center h-4"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-xs">
+      <div data-slot="container" class="flex items-center h-4"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1098,33 +1098,33 @@ exports[`RadioGroup > renders with size xs correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with ui correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-4"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-4"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-4"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-4"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-4"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-4"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1134,33 +1134,33 @@ exports[`RadioGroup > renders with ui correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with valueKey correctly 1`] = `
-"<div id="v-0-0" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
-  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:Option 1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="Option 1" aria-label="Option 1">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:Option 1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="Option 1" aria-label="Option 1">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:Option 1" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:Option 1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:Option 2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="Option 2" aria-label="Option 2">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:Option 2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="Option 2" aria-label="Option 2">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:Option 2" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:Option 2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div class="flex items-start flex-row text-sm">
-      <div class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:Option 3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="Option 3" aria-label="Option 3">
+    <div data-slot="item" class="flex items-start flex-row text-sm">
+      <div data-slot="container" class="flex items-center h-5"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:Option 3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="Option 3" aria-label="Option 3">
           <!---->
           <!--v-if-->
         </button></div>
-      <div class="w-full ms-2"><label for="v-0-0:Option 3" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:Option 3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
diff --git a/test/components/__snapshots__/Select-vue.spec.ts.snap b/test/components/__snapshots__/Select-vue.spec.ts.snap
index 10a9c6cb8e..1c038cd59a 100644
--- a/test/components/__snapshots__/Select-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Select-vue.spec.ts.snap
@@ -1,30 +1,30 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Select > renders with ariaLabel correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" aria-label="Aria label" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" aria-label="Aria label" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -38,33 +38,33 @@ exports[`Select > renders with ariaLabel correctly 1`] = `
 `;
 
 exports[`Select > renders with arrow correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
-    </div><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" class="fill-default" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span>
+    </div><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" data-slot="arrow" class="fill-default" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span>
   </div>
 </div>
 
@@ -74,51 +74,51 @@ exports[`Select > renders with arrow correctly 1`] = `
 `;
 
 exports[`Select > renders with avatar and leadingIcon correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></button>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`Select > renders with avatar and trailingIcon correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></button>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`Select > renders with avatar correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></button>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`Select > renders with class correctly 1`] = `
-"<button class="relative group inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9 rounded-full" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9 rounded-full" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -132,30 +132,30 @@ exports[`Select > renders with class correctly 1`] = `
 `;
 
 exports[`Select > renders with defaultValue correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open">
-  <!--v-if--><span class="truncate pointer-events-none">Backlog</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open">
+  <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="true" data-state="checked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="true" data-state="checked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -169,30 +169,30 @@ exports[`Select > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`Select > renders with descriptionKey correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -206,30 +206,30 @@ exports[`Select > renders with descriptionKey correctly 1`] = `
 `;
 
 exports[`Select > renders with disabled correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" disabled="" dir="ltr" data-state="open" data-disabled="" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" disabled="" dir="ltr" data-state="open" data-disabled="" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -243,37 +243,37 @@ exports[`Select > renders with disabled correctly 1`] = `
 `;
 
 exports[`Select > renders with icon correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></button>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`Select > renders with id correctly 1`] = `
-"<button id="id" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button id="id" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -287,21 +287,21 @@ exports[`Select > renders with id correctly 1`] = `
 `;
 
 exports[`Select > renders with item slot correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">Item slot</div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1">Item slot</div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1">Item slot</div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1">Item slot</div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1">Item slot</div>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">Item slot</div>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1">Item slot</div>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1">Item slot</div>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1">Item slot</div>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1">Item slot</div>
       </div>
     </div>
     <!--v-if-->
@@ -314,21 +314,21 @@ exports[`Select > renders with item slot correctly 1`] = `
 `;
 
 exports[`Select > renders with item-description slot correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
       </div>
     </div>
     <!--v-if-->
@@ -341,30 +341,30 @@ exports[`Select > renders with item-description slot correctly 1`] = `
 `;
 
 exports[`Select > renders with item-label slot correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Item label slot</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Item label slot</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Item label slot</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Item label slot</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">Item label slot</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">Item label slot</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Item label slot</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Item label slot</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Item label slot</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Item label slot</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -378,30 +378,30 @@ exports[`Select > renders with item-label slot correctly 1`] = `
 `;
 
 exports[`Select > renders with item-leading slot correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -415,30 +415,30 @@ exports[`Select > renders with item-leading slot correctly 1`] = `
 `;
 
 exports[`Select > renders with item-trailing slot correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
         </div>
       </div>
     </div>
@@ -452,30 +452,30 @@ exports[`Select > renders with item-trailing slot correctly 1`] = `
 `;
 
 exports[`Select > renders with items correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -489,21 +489,21 @@ exports[`Select > renders with items correctly 1`] = `
 `;
 
 exports[`Select > renders with items with description correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
       </div>
     </div>
     <!--v-if-->
@@ -516,30 +516,30 @@ exports[`Select > renders with items with description correctly 1`] = `
 `;
 
 exports[`Select > renders with labelKey correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">in_progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">in_progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -553,35 +553,35 @@ exports[`Select > renders with labelKey correctly 1`] = `
 `;
 
 exports[`Select > renders with leading and icon correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></button>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`Select > renders with leading slot correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></button>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span></button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -595,36 +595,36 @@ exports[`Select > renders with leading slot correctly 1`] = `
 `;
 
 exports[`Select > renders with leadingIcon correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></button>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`Select > renders with loading and avatar correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></button>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`Select > renders with loading correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></button>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`Select > renders with loading trailing and avatar correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></button>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`Select > renders with loading trailing correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
 </button>
 <!--teleport start-->
 <!--teleport end-->
@@ -632,37 +632,37 @@ exports[`Select > renders with loading trailing correctly 1`] = `
 `;
 
 exports[`Select > renders with loadingIcon correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></button>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`Select > renders with modelValue correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open">
-  <!--v-if--><span class="truncate pointer-events-none">Backlog</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open">
+  <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="true" data-state="checked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="true" data-state="checked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -676,30 +676,30 @@ exports[`Select > renders with modelValue correctly 1`] = `
 `;
 
 exports[`Select > renders with multiple and modelValue correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open">
-  <!--v-if--><span class="truncate pointer-events-none">Backlog, Todo</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open">
+  <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog, Todo</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -713,30 +713,30 @@ exports[`Select > renders with multiple and modelValue correctly 1`] = `
 `;
 
 exports[`Select > renders with multiple correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -750,30 +750,30 @@ exports[`Select > renders with multiple correctly 1`] = `
 `;
 
 exports[`Select > renders with name correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -787,30 +787,30 @@ exports[`Select > renders with name correctly 1`] = `
 `;
 
 exports[`Select > renders with neutral variant ghost correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -824,30 +824,30 @@ exports[`Select > renders with neutral variant ghost correctly 1`] = `
 `;
 
 exports[`Select > renders with neutral variant none correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -861,30 +861,30 @@ exports[`Select > renders with neutral variant none correctly 1`] = `
 `;
 
 exports[`Select > renders with neutral variant outline correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-inverted pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-inverted pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -898,30 +898,30 @@ exports[`Select > renders with neutral variant outline correctly 1`] = `
 `;
 
 exports[`Select > renders with neutral variant soft correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -935,30 +935,30 @@ exports[`Select > renders with neutral variant soft correctly 1`] = `
 `;
 
 exports[`Select > renders with neutral variant subtle correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-inverted pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-inverted pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -972,30 +972,30 @@ exports[`Select > renders with neutral variant subtle correctly 1`] = `
 `;
 
 exports[`Select > renders with placeholder correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">Search...</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">Search...</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1009,30 +1009,30 @@ exports[`Select > renders with placeholder correctly 1`] = `
 `;
 
 exports[`Select > renders with primary variant ghost correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1046,30 +1046,30 @@ exports[`Select > renders with primary variant ghost correctly 1`] = `
 `;
 
 exports[`Select > renders with primary variant none correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1083,30 +1083,30 @@ exports[`Select > renders with primary variant none correctly 1`] = `
 `;
 
 exports[`Select > renders with primary variant outline correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1120,30 +1120,30 @@ exports[`Select > renders with primary variant outline correctly 1`] = `
 `;
 
 exports[`Select > renders with primary variant soft correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1157,30 +1157,30 @@ exports[`Select > renders with primary variant soft correctly 1`] = `
 `;
 
 exports[`Select > renders with primary variant subtle correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1194,30 +1194,30 @@ exports[`Select > renders with primary variant subtle correctly 1`] = `
 `;
 
 exports[`Select > renders with required correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="true" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="true" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1231,30 +1231,30 @@ exports[`Select > renders with required correctly 1`] = `
 `;
 
 exports[`Select > renders with selectedIcon correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1268,30 +1268,30 @@ exports[`Select > renders with selectedIcon correctly 1`] = `
 `;
 
 exports[`Select > renders with size lg correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-10" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-10" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1305,30 +1305,30 @@ exports[`Select > renders with size lg correctly 1`] = `
 `;
 
 exports[`Select > renders with size md correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1342,30 +1342,30 @@ exports[`Select > renders with size md correctly 1`] = `
 `;
 
 exports[`Select > renders with size sm correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-8" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-4"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-8" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-4"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1379,30 +1379,30 @@ exports[`Select > renders with size sm correctly 1`] = `
 `;
 
 exports[`Select > renders with size xl correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-11" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-6"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-11" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-6"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1416,30 +1416,30 @@ exports[`Select > renders with size xl correctly 1`] = `
 `;
 
 exports[`Select > renders with size xs correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-7" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-4"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-7" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-4"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1453,8 +1453,8 @@ exports[`Select > renders with size xs correctly 1`] = `
 `;
 
 exports[`Select > renders with trailing and icon correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 <!--teleport end-->
@@ -1462,30 +1462,30 @@ exports[`Select > renders with trailing and icon correctly 1`] = `
 `;
 
 exports[`Select > renders with trailing slot correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1499,8 +1499,8 @@ exports[`Select > renders with trailing slot correctly 1`] = `
 `;
 
 exports[`Select > renders with trailingIcon correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 <!--teleport end-->
@@ -1508,30 +1508,30 @@ exports[`Select > renders with trailingIcon correctly 1`] = `
 `;
 
 exports[`Select > renders with trailingIcon correctly 2`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1545,30 +1545,30 @@ exports[`Select > renders with trailingIcon correctly 2`] = `
 `;
 
 exports[`Select > renders with ui correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="isolate p-2">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="isolate p-2">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1582,30 +1582,30 @@ exports[`Select > renders with ui correctly 1`] = `
 `;
 
 exports[`Select > renders with valueKey correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-2" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-3" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-4" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-5" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-6" aria-selected="false" data-state="unchecked" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
diff --git a/test/components/__snapshots__/Select.spec.ts.snap b/test/components/__snapshots__/Select.spec.ts.snap
index ab3c809daf..8da43466b1 100644
--- a/test/components/__snapshots__/Select.spec.ts.snap
+++ b/test/components/__snapshots__/Select.spec.ts.snap
@@ -1,30 +1,30 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Select > renders with ariaLabel correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" aria-label="Aria label" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" aria-label="Aria label" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -38,33 +38,33 @@ exports[`Select > renders with ariaLabel correctly 1`] = `
 `;
 
 exports[`Select > renders with arrow correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
-    </div><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" class="fill-default" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span>
+    </div><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" data-slot="arrow" class="fill-default" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span>
   </div>
 </div>
 
@@ -74,51 +74,51 @@ exports[`Select > renders with arrow correctly 1`] = `
 `;
 
 exports[`Select > renders with avatar and leadingIcon correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></button>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`Select > renders with avatar and trailingIcon correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></button>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`Select > renders with avatar correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></button>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`Select > renders with class correctly 1`] = `
-"<button class="relative group inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9 rounded-full" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9 rounded-full" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -132,30 +132,30 @@ exports[`Select > renders with class correctly 1`] = `
 `;
 
 exports[`Select > renders with defaultValue correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open">
-  <!--v-if--><span class="truncate pointer-events-none">Backlog</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open">
+  <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="true" data-state="checked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true"></span></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="true" data-state="checked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -169,30 +169,30 @@ exports[`Select > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`Select > renders with descriptionKey correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -206,30 +206,30 @@ exports[`Select > renders with descriptionKey correctly 1`] = `
 `;
 
 exports[`Select > renders with disabled correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" disabled="" dir="ltr" data-state="open" data-disabled="" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" disabled="" dir="ltr" data-state="open" data-disabled="" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -243,37 +243,37 @@ exports[`Select > renders with disabled correctly 1`] = `
 `;
 
 exports[`Select > renders with icon correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></button>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`Select > renders with id correctly 1`] = `
-"<button id="id" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button id="id" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -287,21 +287,21 @@ exports[`Select > renders with id correctly 1`] = `
 `;
 
 exports[`Select > renders with item slot correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">Item slot</div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1">Item slot</div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1">Item slot</div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1">Item slot</div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1">Item slot</div>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">Item slot</div>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1">Item slot</div>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1">Item slot</div>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1">Item slot</div>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1">Item slot</div>
       </div>
     </div>
     <!--v-if-->
@@ -314,21 +314,21 @@ exports[`Select > renders with item slot correctly 1`] = `
 `;
 
 exports[`Select > renders with item-description slot correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
       </div>
     </div>
     <!--v-if-->
@@ -341,30 +341,30 @@ exports[`Select > renders with item-description slot correctly 1`] = `
 `;
 
 exports[`Select > renders with item-label slot correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Item label slot</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Item label slot</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Item label slot</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Item label slot</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">Item label slot</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">Item label slot</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Item label slot</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Item label slot</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Item label slot</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Item label slot</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -378,30 +378,30 @@ exports[`Select > renders with item-label slot correctly 1`] = `
 `;
 
 exports[`Select > renders with item-leading slot correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -415,30 +415,30 @@ exports[`Select > renders with item-leading slot correctly 1`] = `
 `;
 
 exports[`Select > renders with item-trailing slot correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
         </div>
       </div>
     </div>
@@ -452,30 +452,30 @@ exports[`Select > renders with item-trailing slot correctly 1`] = `
 `;
 
 exports[`Select > renders with items correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); display: flex; flex-direction: column; animation: none; pointer-events: auto; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -489,21 +489,21 @@ exports[`Select > renders with items correctly 1`] = `
 `;
 
 exports[`Select > renders with items with description correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
       </div>
     </div>
     <!--v-if-->
@@ -516,30 +516,30 @@ exports[`Select > renders with items with description correctly 1`] = `
 `;
 
 exports[`Select > renders with labelKey correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">in_progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">in_progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -553,35 +553,35 @@ exports[`Select > renders with labelKey correctly 1`] = `
 `;
 
 exports[`Select > renders with leading and icon correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></button>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`Select > renders with leading slot correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></button>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -595,36 +595,36 @@ exports[`Select > renders with leading slot correctly 1`] = `
 `;
 
 exports[`Select > renders with leadingIcon correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></button>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`Select > renders with loading and avatar correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></button>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`Select > renders with loading correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></button>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`Select > renders with loading trailing and avatar correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></button>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`Select > renders with loading trailing correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 <!--teleport end-->
@@ -632,37 +632,37 @@ exports[`Select > renders with loading trailing correctly 1`] = `
 `;
 
 exports[`Select > renders with loadingIcon correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></button>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary ps-9 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`Select > renders with modelValue correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open">
-  <!--v-if--><span class="truncate pointer-events-none">Backlog</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open">
+  <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="true" data-state="checked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true"></span></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="true" data-state="checked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -676,30 +676,30 @@ exports[`Select > renders with modelValue correctly 1`] = `
 `;
 
 exports[`Select > renders with multiple and modelValue correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open">
-  <!--v-if--><span class="truncate pointer-events-none">Backlog, Todo</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open">
+  <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog, Todo</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -713,30 +713,30 @@ exports[`Select > renders with multiple and modelValue correctly 1`] = `
 `;
 
 exports[`Select > renders with multiple correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -750,30 +750,30 @@ exports[`Select > renders with multiple correctly 1`] = `
 `;
 
 exports[`Select > renders with name correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -787,30 +787,30 @@ exports[`Select > renders with name correctly 1`] = `
 `;
 
 exports[`Select > renders with neutral variant ghost correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -824,30 +824,30 @@ exports[`Select > renders with neutral variant ghost correctly 1`] = `
 `;
 
 exports[`Select > renders with neutral variant none correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -861,30 +861,30 @@ exports[`Select > renders with neutral variant none correctly 1`] = `
 `;
 
 exports[`Select > renders with neutral variant outline correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-inverted pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-inverted pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -898,30 +898,30 @@ exports[`Select > renders with neutral variant outline correctly 1`] = `
 `;
 
 exports[`Select > renders with neutral variant soft correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -935,30 +935,30 @@ exports[`Select > renders with neutral variant soft correctly 1`] = `
 `;
 
 exports[`Select > renders with neutral variant subtle correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-inverted pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-inverted pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -972,30 +972,30 @@ exports[`Select > renders with neutral variant subtle correctly 1`] = `
 `;
 
 exports[`Select > renders with placeholder correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">Search...</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">Search...</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1009,30 +1009,30 @@ exports[`Select > renders with placeholder correctly 1`] = `
 `;
 
 exports[`Select > renders with primary variant ghost correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1046,30 +1046,30 @@ exports[`Select > renders with primary variant ghost correctly 1`] = `
 `;
 
 exports[`Select > renders with primary variant none correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1083,30 +1083,30 @@ exports[`Select > renders with primary variant none correctly 1`] = `
 `;
 
 exports[`Select > renders with primary variant outline correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1120,30 +1120,30 @@ exports[`Select > renders with primary variant outline correctly 1`] = `
 `;
 
 exports[`Select > renders with primary variant soft correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1157,30 +1157,30 @@ exports[`Select > renders with primary variant soft correctly 1`] = `
 `;
 
 exports[`Select > renders with primary variant subtle correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1194,30 +1194,30 @@ exports[`Select > renders with primary variant subtle correctly 1`] = `
 `;
 
 exports[`Select > renders with required correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="true" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="true" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1231,30 +1231,30 @@ exports[`Select > renders with required correctly 1`] = `
 `;
 
 exports[`Select > renders with selectedIcon correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1268,30 +1268,30 @@ exports[`Select > renders with selectedIcon correctly 1`] = `
 `;
 
 exports[`Select > renders with size lg correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-10" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-3"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-10" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1305,30 +1305,30 @@ exports[`Select > renders with size lg correctly 1`] = `
 `;
 
 exports[`Select > renders with size md correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1342,30 +1342,30 @@ exports[`Select > renders with size md correctly 1`] = `
 `;
 
 exports[`Select > renders with size sm correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-8" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-4" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-8" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-4" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1379,30 +1379,30 @@ exports[`Select > renders with size sm correctly 1`] = `
 `;
 
 exports[`Select > renders with size xl correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-11" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-3"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-6" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-11" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-6" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1416,30 +1416,30 @@ exports[`Select > renders with size xl correctly 1`] = `
 `;
 
 exports[`Select > renders with size xs correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-7" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-4" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-7" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-4" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1453,8 +1453,8 @@ exports[`Select > renders with size xs correctly 1`] = `
 `;
 
 exports[`Select > renders with trailing and icon correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 <!--teleport end-->
@@ -1462,30 +1462,30 @@ exports[`Select > renders with trailing and icon correctly 1`] = `
 `;
 
 exports[`Select > renders with trailing slot correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1499,8 +1499,8 @@ exports[`Select > renders with trailing slot correctly 1`] = `
 `;
 
 exports[`Select > renders with trailingIcon correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 <!--teleport end-->
@@ -1508,30 +1508,30 @@ exports[`Select > renders with trailingIcon correctly 1`] = `
 `;
 
 exports[`Select > renders with trailingIcon correctly 2`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1545,30 +1545,30 @@ exports[`Select > renders with trailingIcon correctly 2`] = `
 `;
 
 exports[`Select > renders with ui correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="isolate p-2">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="isolate p-2">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
@@ -1582,30 +1582,30 @@ exports[`Select > renders with ui correctly 1`] = `
 `;
 
 exports[`Select > renders with valueKey correctly 1`] = `
-"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
-    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
-      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" class="p-1 isolate">
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" class="truncate">Backlog</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+  <div style="box-sizing: border-box; --reka-select-content-transform-origin: var(--reka-popper-transform-origin); --reka-select-content-available-width: var(--reka-popper-available-width); --reka-select-content-available-height: var(--reka-popper-available-height); --reka-select-trigger-width: var(--reka-popper-anchor-width); --reka-select-trigger-height: var(--reka-popper-anchor-height); pointer-events: auto; display: flex; flex-direction: column; animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-dismissable-layer="" tabindex="-1" data-slot="content" class="max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col" position="popper" bodylock="true" id="reka-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-side="bottom" data-align="start">
+    <div role="presentation" data-slot="viewport" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
+      <div role="group" aria-labelledby="reka-select-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-2" data-slot="itemLabel" class="truncate">Backlog</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" class="truncate">Todo</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-3" data-slot="itemLabel" class="truncate">Todo</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" class="truncate">In Progress</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-4" data-slot="itemLabel" class="truncate">In Progress</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" class="truncate">Done</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-5" data-slot="itemLabel" class="truncate">Done</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
-        <div class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" class="truncate">Canceled</span>
-          <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" aria-labelledby="reka-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span id="reka-select-item-text-v-0-0-6" data-slot="itemLabel" class="truncate">Canceled</span>
+          <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
       </div>
     </div>
diff --git a/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap b/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap
index 20f366ab05..d1680e94bb 100644
--- a/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap
+++ b/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap
@@ -1,37 +1,37 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`SelectMenu > renders with ariaLabel correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Aria label" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Aria label" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -47,42 +47,42 @@ exports[`SelectMenu > renders with ariaLabel correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with arrow correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
       </div>
-    </div><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" class="fill-default" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span>
+    </div><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" data-slot="arrow" class="fill-default" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span>
   </div>
 </div>
 
@@ -92,58 +92,58 @@ exports[`SelectMenu > renders with arrow correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with avatar and leadingIcon correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`SelectMenu > renders with avatar and trailingIcon correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`SelectMenu > renders with avatar correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`SelectMenu > renders with class correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9 rounded-full">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9 rounded-full">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -159,24 +159,24 @@ exports[`SelectMenu > renders with class correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with create-item-label slot correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="New value">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="New value">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="truncate">Create item slot</span></div>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span data-slot="itemLabel" class="truncate">Create item slot</span></div>
         </div>
       </div>
     </div>
@@ -190,37 +190,37 @@ exports[`SelectMenu > renders with create-item-label slot correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with default slot correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if-->Default slot<span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if-->Default slot<span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -236,37 +236,37 @@ exports[`SelectMenu > renders with default slot correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with defaultValue correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate pointer-events-none">Backlog</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -282,37 +282,37 @@ exports[`SelectMenu > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with descriptionKey correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -328,37 +328,37 @@ exports[`SelectMenu > renders with descriptionKey correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with disabled correctly 1`] = `
-"<button disabled="" type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" data-disabled="" aria-disabled="true" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button disabled="" type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" data-disabled="" aria-disabled="true" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" disabled="" autocomplete="off" data-disabled="" aria-disabled="true" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" disabled="" autocomplete="off" data-disabled="" aria-disabled="true" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -374,44 +374,44 @@ exports[`SelectMenu > renders with disabled correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with icon correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`SelectMenu > renders with id correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" id="id" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" id="id" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -427,28 +427,28 @@ exports[`SelectMenu > renders with id correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with item slot correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
-        <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+        <!--v-if-->
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
         </div>
         <!--v-if-->
       </div>
@@ -463,28 +463,28 @@ exports[`SelectMenu > renders with item slot correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with item-description slot correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
-        <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+        <!--v-if-->
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
         </div>
         <!--v-if-->
       </div>
@@ -499,37 +499,37 @@ exports[`SelectMenu > renders with item-description slot correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with item-label slot correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Item label slot</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Item label slot</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Item label slot</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Item label slot</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Item label slot</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -545,37 +545,37 @@ exports[`SelectMenu > renders with item-label slot correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with item-leading slot correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -591,37 +591,37 @@ exports[`SelectMenu > renders with item-leading slot correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with item-trailing slot correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -637,37 +637,37 @@ exports[`SelectMenu > renders with item-trailing slot correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with items correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -683,28 +683,28 @@ exports[`SelectMenu > renders with items correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with items with description correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
-        <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+        <!--v-if-->
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
         </div>
         <!--v-if-->
       </div>
@@ -719,37 +719,37 @@ exports[`SelectMenu > renders with items with description correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with labelKey correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">in_progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">in_progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -765,42 +765,42 @@ exports[`SelectMenu > renders with labelKey correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with leading and icon correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`SelectMenu > renders with leading slot correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span></button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -816,36 +816,36 @@ exports[`SelectMenu > renders with leading slot correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with leadingIcon correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`SelectMenu > renders with loading and avatar correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`SelectMenu > renders with loading correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`SelectMenu > renders with loading trailing and avatar correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`SelectMenu > renders with loading trailing correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
 </button>
 <!--teleport start-->
 <!--teleport end-->
@@ -853,44 +853,44 @@ exports[`SelectMenu > renders with loading trailing correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with loadingIcon correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`SelectMenu > renders with modelValue correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate pointer-events-none">Backlog</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -906,37 +906,37 @@ exports[`SelectMenu > renders with modelValue correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with multiple and modelValue correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate pointer-events-none">Backlog, Todo</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog, Todo</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -952,37 +952,37 @@ exports[`SelectMenu > renders with multiple and modelValue correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with multiple correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -998,37 +998,37 @@ exports[`SelectMenu > renders with multiple correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with name correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1044,37 +1044,37 @@ exports[`SelectMenu > renders with name correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with neutral variant ghost correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1090,37 +1090,37 @@ exports[`SelectMenu > renders with neutral variant ghost correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with neutral variant none correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1136,37 +1136,37 @@ exports[`SelectMenu > renders with neutral variant none correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with neutral variant outline correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1182,37 +1182,37 @@ exports[`SelectMenu > renders with neutral variant outline correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with neutral variant soft correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1228,37 +1228,37 @@ exports[`SelectMenu > renders with neutral variant soft correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with neutral variant subtle correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1274,37 +1274,37 @@ exports[`SelectMenu > renders with neutral variant subtle correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with placeholder correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">Search...</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">Search...</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1320,37 +1320,37 @@ exports[`SelectMenu > renders with placeholder correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with primary variant ghost correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1366,37 +1366,37 @@ exports[`SelectMenu > renders with primary variant ghost correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with primary variant none correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1412,37 +1412,37 @@ exports[`SelectMenu > renders with primary variant none correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with primary variant outline correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1458,37 +1458,37 @@ exports[`SelectMenu > renders with primary variant outline correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with primary variant soft correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1504,37 +1504,37 @@ exports[`SelectMenu > renders with primary variant soft correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with primary variant subtle correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1550,37 +1550,37 @@ exports[`SelectMenu > renders with primary variant subtle correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with required correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1596,36 +1596,36 @@ exports[`SelectMenu > renders with required correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with searchInput icon correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1641,37 +1641,37 @@ exports[`SelectMenu > renders with searchInput icon correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with searchInput placeholder correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Filter items..." class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Filter items..." data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1687,37 +1687,37 @@ exports[`SelectMenu > renders with searchInput placeholder correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with selectedIcon correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1733,37 +1733,37 @@ exports[`SelectMenu > renders with selectedIcon correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with size lg correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-10">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-10">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1779,37 +1779,37 @@ exports[`SelectMenu > renders with size lg correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with size md correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1825,37 +1825,37 @@ exports[`SelectMenu > renders with size md correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with size sm correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-8">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-4"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-8">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-4"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1871,37 +1871,37 @@ exports[`SelectMenu > renders with size sm correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with size xl correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-11">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-6"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-11">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-6"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1917,37 +1917,37 @@ exports[`SelectMenu > renders with size xl correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with size xs correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-7">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-4"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-7">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-4"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1963,8 +1963,8 @@ exports[`SelectMenu > renders with size xs correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with trailing and icon correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 <!--teleport end-->
@@ -1972,37 +1972,37 @@ exports[`SelectMenu > renders with trailing and icon correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with trailing slot correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -2018,8 +2018,8 @@ exports[`SelectMenu > renders with trailing slot correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with trailingIcon correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 <!--teleport end-->
@@ -2027,37 +2027,37 @@ exports[`SelectMenu > renders with trailingIcon correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with trailingIcon correctly 2`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -2073,37 +2073,37 @@ exports[`SelectMenu > renders with trailingIcon correctly 2`] = `
 `;
 
 exports[`SelectMenu > renders with ui correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="isolate p-2">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="isolate p-2">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -2119,37 +2119,37 @@ exports[`SelectMenu > renders with ui correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with valueKey correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -2165,21 +2165,21 @@ exports[`SelectMenu > renders with valueKey correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with virtualize correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="text-center text-muted p-1.5 text-sm">No data</div>
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 p-1 isolate">
+      <div data-slot="empty" class="text-center text-muted p-1.5 text-sm">No data</div>
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 p-1 isolate">
         <!--v-if-->
         <div data-reka-virtualizer="" style="position: relative; width: 100%; height: 160px;"></div>
         <!--v-if-->
@@ -2195,34 +2195,34 @@ exports[`SelectMenu > renders with virtualize correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders without searchInput correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
       <!--v-if-->
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
diff --git a/test/components/__snapshots__/SelectMenu.spec.ts.snap b/test/components/__snapshots__/SelectMenu.spec.ts.snap
index e133c78918..1ca7ecee3a 100644
--- a/test/components/__snapshots__/SelectMenu.spec.ts.snap
+++ b/test/components/__snapshots__/SelectMenu.spec.ts.snap
@@ -1,37 +1,37 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`SelectMenu > renders with ariaLabel correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Aria label" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Aria label" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -47,42 +47,42 @@ exports[`SelectMenu > renders with ariaLabel correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with arrow correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
       </div>
-    </div><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" class="fill-default" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span>
+    </div><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" data-slot="arrow" class="fill-default" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span>
   </div>
 </div>
 
@@ -92,58 +92,58 @@ exports[`SelectMenu > renders with arrow correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with avatar and leadingIcon correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`SelectMenu > renders with avatar and trailingIcon correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`SelectMenu > renders with avatar correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`SelectMenu > renders with class correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9 rounded-full">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9 rounded-full">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -159,24 +159,24 @@ exports[`SelectMenu > renders with class correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with create-item-label slot correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="New value" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="New value" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="truncate">Create item slot</span></div>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span data-slot="itemLabel" class="truncate">Create item slot</span></div>
         </div>
       </div>
     </div>
@@ -190,37 +190,37 @@ exports[`SelectMenu > renders with create-item-label slot correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with default slot correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if-->Default slot<span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if-->Default slot<span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -236,37 +236,37 @@ exports[`SelectMenu > renders with default slot correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with defaultValue correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate pointer-events-none">Backlog</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true"></span></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -282,37 +282,37 @@ exports[`SelectMenu > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with descriptionKey correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -328,37 +328,37 @@ exports[`SelectMenu > renders with descriptionKey correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with disabled correctly 1`] = `
-"<button disabled="" type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" data-disabled="" aria-disabled="true" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button disabled="" type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" data-disabled="" aria-disabled="true" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" disabled="" autocomplete="off" data-disabled="" aria-disabled="true" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" disabled="" autocomplete="off" data-disabled="" aria-disabled="true" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -374,44 +374,44 @@ exports[`SelectMenu > renders with disabled correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with icon correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`SelectMenu > renders with id correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" id="id" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" id="id" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -427,28 +427,28 @@ exports[`SelectMenu > renders with id correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with item slot correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
-        <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted="">Item slot</div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+        <!--v-if-->
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted="">Item slot</div>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
         </div>
         <!--v-if-->
       </div>
@@ -463,28 +463,28 @@ exports[`SelectMenu > renders with item slot correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with item-description slot correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
-        <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span><span class="truncate text-muted">Item description slot</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+        <!--v-if-->
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
         </div>
         <!--v-if-->
       </div>
@@ -499,37 +499,37 @@ exports[`SelectMenu > renders with item-description slot correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with item-label slot correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Item label slot</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Item label slot</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Item label slot</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Item label slot</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Item label slot</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -545,37 +545,37 @@ exports[`SelectMenu > renders with item-label slot correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with item-leading slot correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted="">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted="">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -591,37 +591,37 @@ exports[`SelectMenu > renders with item-leading slot correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with item-trailing slot correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -637,37 +637,37 @@ exports[`SelectMenu > renders with item-trailing slot correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with items correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -683,28 +683,28 @@ exports[`SelectMenu > renders with items correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with items with description correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
-        <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span><span class="truncate text-muted">Description</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+        <!--v-if-->
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
         </div>
         <!--v-if-->
       </div>
@@ -719,37 +719,37 @@ exports[`SelectMenu > renders with items with description correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with labelKey correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">in_progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">in_progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -765,42 +765,42 @@ exports[`SelectMenu > renders with labelKey correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with leading and icon correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`SelectMenu > renders with leading slot correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -816,36 +816,36 @@ exports[`SelectMenu > renders with leading slot correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with leadingIcon correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`SelectMenu > renders with loading and avatar correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`SelectMenu > renders with loading correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`SelectMenu > renders with loading trailing and avatar correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`SelectMenu > renders with loading trailing correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 <!--teleport end-->
@@ -853,44 +853,44 @@ exports[`SelectMenu > renders with loading trailing correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with loadingIcon correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></button>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!--v-if-->"
 `;
 
 exports[`SelectMenu > renders with modelValue correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate pointer-events-none">Backlog</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true"></span></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -906,37 +906,37 @@ exports[`SelectMenu > renders with modelValue correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with multiple and modelValue correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate pointer-events-none">Backlog, Todo</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="value" class="truncate pointer-events-none">Backlog, Todo</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true"></span></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true"></span></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -952,37 +952,37 @@ exports[`SelectMenu > renders with multiple and modelValue correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with multiple correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -998,37 +998,37 @@ exports[`SelectMenu > renders with multiple correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with name correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1044,37 +1044,37 @@ exports[`SelectMenu > renders with name correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with neutral variant ghost correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1090,37 +1090,37 @@ exports[`SelectMenu > renders with neutral variant ghost correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with neutral variant none correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1136,37 +1136,37 @@ exports[`SelectMenu > renders with neutral variant none correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with neutral variant outline correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1182,37 +1182,37 @@ exports[`SelectMenu > renders with neutral variant outline correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with neutral variant soft correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1228,37 +1228,37 @@ exports[`SelectMenu > renders with neutral variant soft correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with neutral variant subtle correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1274,37 +1274,37 @@ exports[`SelectMenu > renders with neutral variant subtle correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with placeholder correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">Search...</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">Search...</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1320,37 +1320,37 @@ exports[`SelectMenu > renders with placeholder correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with primary variant ghost correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1366,37 +1366,37 @@ exports[`SelectMenu > renders with primary variant ghost correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with primary variant none correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1412,37 +1412,37 @@ exports[`SelectMenu > renders with primary variant none correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with primary variant outline correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1458,37 +1458,37 @@ exports[`SelectMenu > renders with primary variant outline correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with primary variant soft correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1504,37 +1504,37 @@ exports[`SelectMenu > renders with primary variant soft correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with primary variant subtle correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1550,37 +1550,37 @@ exports[`SelectMenu > renders with primary variant subtle correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with required correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1596,36 +1596,36 @@ exports[`SelectMenu > renders with required correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with searchInput icon correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1641,37 +1641,37 @@ exports[`SelectMenu > renders with searchInput icon correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with searchInput placeholder correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Filter items..." class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Filter items..." data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1687,37 +1687,37 @@ exports[`SelectMenu > renders with searchInput placeholder correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with selectedIcon correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1733,37 +1733,37 @@ exports[`SelectMenu > renders with selectedIcon correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with size lg correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-10">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-3"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-10">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1779,37 +1779,37 @@ exports[`SelectMenu > renders with size lg correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with size md correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1825,37 +1825,37 @@ exports[`SelectMenu > renders with size md correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with size sm correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-8">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-4" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-8">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-4" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1871,37 +1871,37 @@ exports[`SelectMenu > renders with size sm correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with size xl correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-11">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-3"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-6" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-11">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-3"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-6" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1917,37 +1917,37 @@ exports[`SelectMenu > renders with size xl correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with size xs correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-7">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-4" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-7">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-4" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -1963,8 +1963,8 @@ exports[`SelectMenu > renders with size xs correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with trailing and icon correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 <!--teleport end-->
@@ -1972,37 +1972,37 @@ exports[`SelectMenu > renders with trailing and icon correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with trailing slot correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -2018,8 +2018,8 @@ exports[`SelectMenu > renders with trailing slot correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with trailingIcon correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 <!--teleport end-->
@@ -2027,37 +2027,37 @@ exports[`SelectMenu > renders with trailingIcon correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with trailingIcon correctly 2`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -2073,37 +2073,37 @@ exports[`SelectMenu > renders with trailingIcon correctly 2`] = `
 `;
 
 exports[`SelectMenu > renders with ui correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="isolate p-2">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="isolate p-2">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -2119,37 +2119,37 @@ exports[`SelectMenu > renders with ui correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with valueKey correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
@@ -2165,21 +2165,21 @@ exports[`SelectMenu > renders with valueKey correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders with virtualize correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
-      <div class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" aria-autocomplete="list" role="combobox" value="">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="text-center text-muted p-1.5 text-sm">No data</div>
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 p-1 isolate">
+      <div data-slot="empty" class="text-center text-muted p-1.5 text-sm">No data</div>
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 p-1 isolate">
         <!--v-if-->
         <div data-reka-virtualizer="" style="position: relative; width: 100%; height: 160px;"></div>
         <!--v-if-->
@@ -2195,34 +2195,34 @@ exports[`SelectMenu > renders with virtualize correctly 1`] = `
 `;
 
 exports[`SelectMenu > renders without searchInput correctly 1`] = `
-"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
-  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" dir="ltr" style="pointer-events: auto;" data-slot="base" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">
+  <!--v-if--><span data-slot="placeholder" class="truncate text-dimmed">&nbsp;</span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </button>
 <!--teleport start-->
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
-    <div tabindex="-1" class="flex flex-col min-h-0">
+  <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
+    <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
       <!--v-if-->
       <!--v-if-->
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
-        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
-          <div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Backlog</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+        <div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" data-slot="group" class="p-1 isolate">
+          <div id="reka-combobox-item-v-0-0-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Todo</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">In Progress</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Done</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
-          <div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="flex-1 flex flex-col min-w-0"><span class="truncate">Canceled</span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          <div id="reka-combobox-item-v-0-0-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
         </div>
         <!--v-if-->
diff --git a/test/components/__snapshots__/Separator-vue.spec.ts.snap b/test/components/__snapshots__/Separator-vue.spec.ts.snap
index 5ff0d0310a..9780957a28 100644
--- a/test/components/__snapshots__/Separator-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Separator-vue.spec.ts.snap
@@ -1,118 +1,118 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Separator > renders with as correctly 1`] = `"<span data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row"><div class="border-default w-full border-solid border-t"></div><!--v-if--></span>"`;
+exports[`Separator > renders with as correctly 1`] = `"<span data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row"><div data-slot="border" class="border-default w-full border-solid border-t"></div><!--v-if--></span>"`;
 
 exports[`Separator > renders with avatar correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-default w-full border-solid border-t"></div>
-  <div class="font-medium text-default flex mx-3 whitespace-nowrap"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></div>
-  <div class="border-default w-full border-solid border-t"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-default w-full border-solid border-t"></div>
+  <div data-slot="container" class="font-medium text-default flex mx-3 whitespace-nowrap"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
+  <div data-slot="border" class="border-default w-full border-solid border-t"></div>
 </div>"
 `;
 
 exports[`Separator > renders with class correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row-reverse">
-  <div class="border-default w-full border-solid border-t"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row-reverse">
+  <div data-slot="border" class="border-default w-full border-solid border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with color primary correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-primary w-full border-solid border-t"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-primary w-full border-solid border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with decorative correctly 1`] = `
-"<div data-orientation="horizontal" role="none" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-default w-full border-solid border-t"></div>
+"<div data-orientation="horizontal" role="none" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-default w-full border-solid border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with icon correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-default w-full border-solid border-t"></div>
-  <div class="font-medium text-default flex mx-3 whitespace-nowrap"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
-  <div class="border-default w-full border-solid border-t"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-default w-full border-solid border-t"></div>
+  <div data-slot="container" class="font-medium text-default flex mx-3 whitespace-nowrap"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
+  <div data-slot="border" class="border-default w-full border-solid border-t"></div>
 </div>"
 `;
 
 exports[`Separator > renders with label correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-default w-full border-solid border-t"></div>
-  <div class="font-medium text-default flex mx-3 whitespace-nowrap"><span class="text-sm">+1</span></div>
-  <div class="border-default w-full border-solid border-t"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-default w-full border-solid border-t"></div>
+  <div data-slot="container" class="font-medium text-default flex mx-3 whitespace-nowrap"><span data-slot="label" class="text-sm">+1</span></div>
+  <div data-slot="border" class="border-default w-full border-solid border-t"></div>
 </div>"
 `;
 
 exports[`Separator > renders with orientation vertical correctly 1`] = `
-"<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex items-center align-center text-center h-full flex-col">
-  <div class="border-default h-full border-solid border-s"></div>
+"<div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="root" class="flex items-center align-center text-center h-full flex-col">
+  <div data-slot="border" class="border-default h-full border-solid border-s"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with size lg correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-default w-full border-solid border-t-[4px]"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-default w-full border-solid border-t-[4px]"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with size md correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-default w-full border-solid border-t-[3px]"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-default w-full border-solid border-t-[3px]"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with size sm correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-default w-full border-solid border-t-[2px]"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-default w-full border-solid border-t-[2px]"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with size xl correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-default w-full border-solid border-t-[5px]"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-default w-full border-solid border-t-[5px]"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with size xs correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-default w-full border-solid border-t"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-default w-full border-solid border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with type dashed correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-default w-full border-dashed border-t"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-default w-full border-dashed border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with type dotted correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-default w-full border-dotted border-t"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-default w-full border-dotted border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with type solid correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-default w-full border-solid border-t"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-default w-full border-solid border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with ui correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-default w-full border-solid border-t"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-default w-full border-solid border-t"></div>
   <!--v-if-->
 </div>"
 `;
diff --git a/test/components/__snapshots__/Separator.spec.ts.snap b/test/components/__snapshots__/Separator.spec.ts.snap
index 7fe252c228..887124a065 100644
--- a/test/components/__snapshots__/Separator.spec.ts.snap
+++ b/test/components/__snapshots__/Separator.spec.ts.snap
@@ -1,118 +1,118 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Separator > renders with as correctly 1`] = `"<span data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row"><div class="border-default w-full border-solid border-t"></div><!--v-if--></span>"`;
+exports[`Separator > renders with as correctly 1`] = `"<span data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row"><div data-slot="border" class="border-default w-full border-solid border-t"></div><!--v-if--></span>"`;
 
 exports[`Separator > renders with avatar correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-default w-full border-solid border-t"></div>
-  <div class="font-medium text-default flex mx-3 whitespace-nowrap"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></div>
-  <div class="border-default w-full border-solid border-t"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-default w-full border-solid border-t"></div>
+  <div data-slot="container" class="font-medium text-default flex mx-3 whitespace-nowrap"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
+  <div data-slot="border" class="border-default w-full border-solid border-t"></div>
 </div>"
 `;
 
 exports[`Separator > renders with class correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row-reverse">
-  <div class="border-default w-full border-solid border-t"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row-reverse">
+  <div data-slot="border" class="border-default w-full border-solid border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with color primary correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-primary w-full border-solid border-t"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-primary w-full border-solid border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with decorative correctly 1`] = `
-"<div data-orientation="horizontal" role="none" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-default w-full border-solid border-t"></div>
+"<div data-orientation="horizontal" role="none" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-default w-full border-solid border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with icon correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-default w-full border-solid border-t"></div>
-  <div class="font-medium text-default flex mx-3 whitespace-nowrap"><span class="iconify i-lucide:image shrink-0 size-5" aria-hidden="true"></span></div>
-  <div class="border-default w-full border-solid border-t"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-default w-full border-solid border-t"></div>
+  <div data-slot="container" class="font-medium text-default flex mx-3 whitespace-nowrap"><span class="iconify i-lucide:image shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
+  <div data-slot="border" class="border-default w-full border-solid border-t"></div>
 </div>"
 `;
 
 exports[`Separator > renders with label correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-default w-full border-solid border-t"></div>
-  <div class="font-medium text-default flex mx-3 whitespace-nowrap"><span class="text-sm">+1</span></div>
-  <div class="border-default w-full border-solid border-t"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-default w-full border-solid border-t"></div>
+  <div data-slot="container" class="font-medium text-default flex mx-3 whitespace-nowrap"><span data-slot="label" class="text-sm">+1</span></div>
+  <div data-slot="border" class="border-default w-full border-solid border-t"></div>
 </div>"
 `;
 
 exports[`Separator > renders with orientation vertical correctly 1`] = `
-"<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex items-center align-center text-center h-full flex-col">
-  <div class="border-default h-full border-solid border-s"></div>
+"<div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="root" class="flex items-center align-center text-center h-full flex-col">
+  <div data-slot="border" class="border-default h-full border-solid border-s"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with size lg correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-default w-full border-solid border-t-[4px]"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-default w-full border-solid border-t-[4px]"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with size md correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-default w-full border-solid border-t-[3px]"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-default w-full border-solid border-t-[3px]"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with size sm correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-default w-full border-solid border-t-[2px]"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-default w-full border-solid border-t-[2px]"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with size xl correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-default w-full border-solid border-t-[5px]"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-default w-full border-solid border-t-[5px]"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with size xs correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-default w-full border-solid border-t"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-default w-full border-solid border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with type dashed correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-default w-full border-dashed border-t"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-default w-full border-dashed border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with type dotted correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-default w-full border-dotted border-t"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-default w-full border-dotted border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with type solid correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-default w-full border-solid border-t"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-default w-full border-solid border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with ui correctly 1`] = `
-"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-default w-full border-solid border-t"></div>
+"<div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row">
+  <div data-slot="border" class="border-default w-full border-solid border-t"></div>
   <!--v-if-->
 </div>"
 `;
diff --git a/test/components/__snapshots__/Slideover-vue.spec.ts.snap b/test/components/__snapshots__/Slideover-vue.spec.ts.snap
index c3bad332c8..2f7cf427a6 100644
--- a/test/components/__snapshots__/Slideover-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Slideover-vue.spec.ts.snap
@@ -5,19 +5,19 @@ exports[`Slideover > renders with actions slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div>Actions slot<button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </div>Actions slot<button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -30,19 +30,19 @@ exports[`Slideover > renders with body slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6">Body slot</div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6">Body slot</div>
   <!--v-if-->
 </div>
 
@@ -55,19 +55,19 @@ exports[`Slideover > renders with bottom side correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none inset-x-0 bottom-0 max-h-full data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none inset-x-0 bottom-0 max-h-full data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -80,19 +80,19 @@ exports[`Slideover > renders with class correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out] bg-elevated" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out] bg-elevated" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -105,16 +105,16 @@ exports[`Slideover > renders with close slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>Close slot
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -127,19 +127,19 @@ exports[`Slideover > renders with closeIcon correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -152,8 +152,8 @@ exports[`Slideover > renders with content slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->Content slot
 </div>
 
@@ -166,19 +166,19 @@ exports[`Slideover > renders with default slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="reka-dialog-content-v-0" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="reka-dialog-content-v-0" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -191,19 +191,19 @@ exports[`Slideover > renders with description correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -216,19 +216,19 @@ exports[`Slideover > renders with description slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
-      <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description slot</p>
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description slot</p>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -241,20 +241,20 @@ exports[`Slideover > renders with footer slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
-  <div class="flex items-center gap-1.5 p-4 sm:px-6">Footer slot</div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="footer" class="flex items-center gap-1.5 p-4 sm:px-6">Footer slot</div>
 </div>
 
 
@@ -266,11 +266,11 @@ exports[`Slideover > renders with header slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">Header slot</div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">Header slot</div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -283,19 +283,19 @@ exports[`Slideover > renders with left side correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="left" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none left-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="left" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none left-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -308,19 +308,19 @@ exports[`Slideover > renders with open correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -333,19 +333,19 @@ exports[`Slideover > renders with title correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -358,19 +358,19 @@ exports[`Slideover > renders with title slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title slot</h2>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title slot</h2>
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -383,19 +383,19 @@ exports[`Slideover > renders with top side correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="top" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none inset-x-0 top-0 max-h-full data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-top_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="top" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none inset-x-0 top-0 max-h-full data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-top_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -408,19 +408,19 @@ exports[`Slideover > renders with ui correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -433,17 +433,17 @@ exports[`Slideover > renders without close correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
     </div>
     <!--v-if-->
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -457,18 +457,18 @@ exports[`Slideover > renders without overlay correctly 1`] = `
 
 
 <!--v-if-->
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -481,19 +481,19 @@ exports[`Slideover > renders without transition correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
diff --git a/test/components/__snapshots__/Slideover.spec.ts.snap b/test/components/__snapshots__/Slideover.spec.ts.snap
index b9013ed5d0..5ada28f826 100644
--- a/test/components/__snapshots__/Slideover.spec.ts.snap
+++ b/test/components/__snapshots__/Slideover.spec.ts.snap
@@ -5,19 +5,19 @@ exports[`Slideover > renders with actions slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div>Actions slot<button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    </div>Actions slot<button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -30,19 +30,19 @@ exports[`Slideover > renders with body slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6">Body slot</div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6">Body slot</div>
   <!--v-if-->
 </div>
 
@@ -55,19 +55,19 @@ exports[`Slideover > renders with bottom side correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none inset-x-0 bottom-0 max-h-full data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none inset-x-0 bottom-0 max-h-full data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -80,19 +80,19 @@ exports[`Slideover > renders with class correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out] bg-elevated" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out] bg-elevated" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -105,16 +105,16 @@ exports[`Slideover > renders with close slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
     </div>Close slot
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -127,19 +127,19 @@ exports[`Slideover > renders with closeIcon correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true"></span>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -152,8 +152,8 @@ exports[`Slideover > renders with content slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->Content slot
 </div>
 
@@ -166,19 +166,19 @@ exports[`Slideover > renders with default slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="reka-dialog-content-v-0-0-0" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="reka-dialog-content-v-0-0-0" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -191,19 +191,19 @@ exports[`Slideover > renders with description correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -216,19 +216,19 @@ exports[`Slideover > renders with description slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
-      <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description slot</p>
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+      <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description slot</p>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -241,20 +241,20 @@ exports[`Slideover > renders with footer slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
-  <div class="flex items-center gap-1.5 p-4 sm:px-6">Footer slot</div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="footer" class="flex items-center gap-1.5 p-4 sm:px-6">Footer slot</div>
 </div>
 
 
@@ -266,11 +266,11 @@ exports[`Slideover > renders with header slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">Header slot</div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">Header slot</div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -283,19 +283,19 @@ exports[`Slideover > renders with left side correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="left" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none left-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="left" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none left-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -308,19 +308,19 @@ exports[`Slideover > renders with open correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -333,19 +333,19 @@ exports[`Slideover > renders with title correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -358,19 +358,19 @@ exports[`Slideover > renders with title slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title slot</h2>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title slot</h2>
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -383,19 +383,19 @@ exports[`Slideover > renders with top side correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="top" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none inset-x-0 top-0 max-h-full data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-top_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="top" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none inset-x-0 top-0 max-h-full data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-top_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -408,19 +408,19 @@ exports[`Slideover > renders with ui correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-2"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-2"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -433,17 +433,17 @@ exports[`Slideover > renders without close correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
     </div>
     <!--v-if-->
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -457,18 +457,18 @@ exports[`Slideover > renders without overlay correctly 1`] = `
 
 
 <!--v-if-->
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
@@ -481,19 +481,19 @@ exports[`Slideover > renders without transition correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
-    <div class="">
-      <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
-      <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
-    </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+      <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
+  <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
 
diff --git a/test/components/__snapshots__/Slider-vue.spec.ts.snap b/test/components/__snapshots__/Slider-vue.spec.ts.snap
index 924eee56a5..52ea804a2f 100644
--- a/test/components/__snapshots__/Slider-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Slider-vue.spec.ts.snap
@@ -1,97 +1,97 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Slider > renders with ariaLabel correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-label="Aria label" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-label="Aria label" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with as correctly 1`] = `
-"<section data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+"<section data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
   <!--v-if-->
 </section>"
 `;
 
 exports[`Slider > renders with class correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-48" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-48" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with color neutral correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-inverted h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-inverted focus-visible:outline-inverted/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-valuenow="10"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" data-slot="range" class="absolute rounded-full bg-inverted h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-inverted focus-visible:outline-inverted/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-valuenow="10"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with defaultValue correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-valuenow="10"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-valuenow="10"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with disabled correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full opacity-75 cursor-not-allowed" aria-disabled="true" data-disabled=""><span data-disabled="" data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-disabled="" data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" data-disabled="" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full opacity-75 cursor-not-allowed" aria-disabled="true" data-disabled=""><span data-disabled="" data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-disabled="" data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" data-disabled="" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with inverted correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="right: 0%; left: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; right: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="right: 0%; left: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; right: calc(0% + 0px);" aria-valuenow="0"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with min max step correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="4" aria-valuemax="12" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="4" aria-valuemax="12" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with min steps between thumbs correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 70%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-label="Minimum" aria-valuenow="0"></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(30% + 0px);" aria-label="Maximum" aria-valuenow="30"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 70%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-label="Minimum" aria-valuenow="0"></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(30% + 0px);" aria-label="Maximum" aria-valuenow="30"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with modelValue correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-valuenow="10"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-valuenow="10"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with multiple thumbs correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-label="Minimum" aria-valuenow="0"></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-label="Maximum" aria-valuenow="10"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-label="Minimum" aria-valuenow="0"></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-label="Maximum" aria-valuenow="10"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with name correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with orientation vertical correctly 1`] = `
-"<span data-slider-impl="" data-orientation="vertical" style="--reka-slider-thumb-transform: translateY(50%);" class="relative flex items-center select-none touch-none flex-col h-full" dir="ltr" aria-disabled="false"><span data-orientation="vertical" class="relative bg-accented overflow-hidden rounded-full grow w-[8px]"><span data-orientation="vertical" style="bottom: 0%; top: 100%;" class="absolute rounded-full bg-primary w-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="vertical" aria-valuemin="0" aria-valuemax="100" aria-orientation="vertical" style="transform: var(--reka-slider-thumb-transform); position: absolute; bottom: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" data-orientation="vertical" style="--reka-slider-thumb-transform: translateY(50%);" data-slot="root" class="relative flex items-center select-none touch-none flex-col h-full" dir="ltr" aria-disabled="false"><span data-orientation="vertical" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow w-[8px]"><span data-orientation="vertical" style="bottom: 0%; top: 100%;" data-slot="range" class="absolute rounded-full bg-primary w-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="vertical" aria-valuemin="0" aria-valuemax="100" aria-orientation="vertical" style="transform: var(--reka-slider-thumb-transform); position: absolute; bottom: calc(0% + 0px);" aria-valuenow="0"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with size lg correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[9px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4.5" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[9px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4.5" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with size md correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with size sm correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[7px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-3.5" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[7px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-3.5" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with size xl correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[10px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-5" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[10px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-5" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with size xs correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[6px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-3" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[6px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-3" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with ui correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative overflow-hidden rounded-full grow h-[8px] bg-elevated"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative overflow-hidden rounded-full grow h-[8px] bg-elevated"><span data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
 <!--v-if--></span>"
 `;
diff --git a/test/components/__snapshots__/Slider.spec.ts.snap b/test/components/__snapshots__/Slider.spec.ts.snap
index 924eee56a5..52ea804a2f 100644
--- a/test/components/__snapshots__/Slider.spec.ts.snap
+++ b/test/components/__snapshots__/Slider.spec.ts.snap
@@ -1,97 +1,97 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Slider > renders with ariaLabel correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-label="Aria label" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-label="Aria label" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with as correctly 1`] = `
-"<section data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+"<section data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
   <!--v-if-->
 </section>"
 `;
 
 exports[`Slider > renders with class correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-48" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-48" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with color neutral correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-inverted h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-inverted focus-visible:outline-inverted/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-valuenow="10"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" data-slot="range" class="absolute rounded-full bg-inverted h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-inverted focus-visible:outline-inverted/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-valuenow="10"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with defaultValue correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-valuenow="10"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-valuenow="10"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with disabled correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full opacity-75 cursor-not-allowed" aria-disabled="true" data-disabled=""><span data-disabled="" data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-disabled="" data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" data-disabled="" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full opacity-75 cursor-not-allowed" aria-disabled="true" data-disabled=""><span data-disabled="" data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-disabled="" data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" data-disabled="" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with inverted correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="right: 0%; left: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; right: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="right: 0%; left: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; right: calc(0% + 0px);" aria-valuenow="0"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with min max step correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="4" aria-valuemax="12" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="4" aria-valuemax="12" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with min steps between thumbs correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 70%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-label="Minimum" aria-valuenow="0"></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(30% + 0px);" aria-label="Maximum" aria-valuenow="30"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 70%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-label="Minimum" aria-valuenow="0"></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(30% + 0px);" aria-label="Maximum" aria-valuenow="30"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with modelValue correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-valuenow="10"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-valuenow="10"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with multiple thumbs correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-label="Minimum" aria-valuenow="0"></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-label="Maximum" aria-valuenow="10"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-label="Minimum" aria-valuenow="0"></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-label="Maximum" aria-valuenow="10"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with name correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with orientation vertical correctly 1`] = `
-"<span data-slider-impl="" data-orientation="vertical" style="--reka-slider-thumb-transform: translateY(50%);" class="relative flex items-center select-none touch-none flex-col h-full" dir="ltr" aria-disabled="false"><span data-orientation="vertical" class="relative bg-accented overflow-hidden rounded-full grow w-[8px]"><span data-orientation="vertical" style="bottom: 0%; top: 100%;" class="absolute rounded-full bg-primary w-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="vertical" aria-valuemin="0" aria-valuemax="100" aria-orientation="vertical" style="transform: var(--reka-slider-thumb-transform); position: absolute; bottom: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" data-orientation="vertical" style="--reka-slider-thumb-transform: translateY(50%);" data-slot="root" class="relative flex items-center select-none touch-none flex-col h-full" dir="ltr" aria-disabled="false"><span data-orientation="vertical" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow w-[8px]"><span data-orientation="vertical" style="bottom: 0%; top: 100%;" data-slot="range" class="absolute rounded-full bg-primary w-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="vertical" aria-valuemin="0" aria-valuemax="100" aria-orientation="vertical" style="transform: var(--reka-slider-thumb-transform); position: absolute; bottom: calc(0% + 0px);" aria-valuenow="0"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with size lg correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[9px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4.5" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[9px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4.5" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with size md correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with size sm correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[7px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-3.5" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[7px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-3.5" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with size xl correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[10px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-5" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[10px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-5" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with size xs correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[6px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-3" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative bg-accented overflow-hidden rounded-full grow h-[6px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-3" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
 <!--v-if--></span>"
 `;
 
 exports[`Slider > renders with ui correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative overflow-hidden rounded-full grow h-[8px] bg-elevated"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" data-slot="root" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" data-slot="track" class="relative overflow-hidden rounded-full grow h-[8px] bg-elevated"><span data-orientation="horizontal" style="left: 0%; right: 100%;" data-slot="range" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" data-slot="thumb" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
 <!--v-if--></span>"
 `;
diff --git a/test/components/__snapshots__/Stepper-vue.spec.ts.snap b/test/components/__snapshots__/Stepper-vue.spec.ts.snap
index a11b2cc14f..e20c4269f0 100644
--- a/test/components/__snapshots__/Stepper-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Stepper-vue.spec.ts.snap
@@ -1,39 +1,39 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Stepper > renders with as correctly 1`] = `
-"<section role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+"<section role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -43,39 +43,39 @@ exports[`Stepper > renders with as correctly 1`] = `
 `;
 
 exports[`Stepper > renders with class correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex flex-col gap-8">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex flex-col gap-8">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -85,81 +85,81 @@ exports[`Stepper > renders with class correctly 1`] = `
 `;
 
 exports[`Stepper > renders with content slot correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
-  <div class="size-full">Content slot</div>
+  <div data-slot="content" class="size-full">Content slot</div>
   <div aria-live="polite" aria-atomic="true" role="status" style="transform: translateX(-100%); position: absolute; pointer-events: none; opacity: 0; margin: 0px;"> Step 0 of 3</div>
 </div>"
 `;
 
 exports[`Stepper > renders with custom slot correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -169,39 +169,39 @@ exports[`Stepper > renders with custom slot correctly 1`] = `
 `;
 
 exports[`Stepper > renders with default slot correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -211,39 +211,39 @@ exports[`Stepper > renders with default slot correctly 1`] = `
 `;
 
 exports[`Stepper > renders with defaultValue correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div data-state="completed" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="completed" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div data-state="completed" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="completed" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -253,39 +253,39 @@ exports[`Stepper > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`Stepper > renders with description slot correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Description slot</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" data-slot="description" class="text-muted text-wrap text-sm">Description slot</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Description slot</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" data-slot="description" class="text-muted text-wrap text-sm">Description slot</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Description slot</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" data-slot="description" class="text-muted text-wrap text-sm">Description slot</div>
       </div>
     </div>
   </div>
@@ -295,39 +295,39 @@ exports[`Stepper > renders with description slot correctly 1`] = `
 `;
 
 exports[`Stepper > renders with indicator slot correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">Indicator slot</div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">Indicator slot</div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">Indicator slot</div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">Indicator slot</div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">Indicator slot</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">Indicator slot</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -337,39 +337,39 @@ exports[`Stepper > renders with indicator slot correctly 1`] = `
 `;
 
 exports[`Stepper > renders with items correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -379,39 +379,39 @@ exports[`Stepper > renders with items correctly 1`] = `
 `;
 
 exports[`Stepper > renders with modelValue correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div data-state="completed" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="completed" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div data-state="completed" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="completed" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -421,39 +421,39 @@ exports[`Stepper > renders with modelValue correctly 1`] = `
 `;
 
 exports[`Stepper > renders with neutral color correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted focus-visible:outline-inverted">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted focus-visible:outline-inverted">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-inverted start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted focus-visible:outline-inverted">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted focus-visible:outline-inverted">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-inverted start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted focus-visible:outline-inverted">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted focus-visible:outline-inverted">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -463,39 +463,39 @@ exports[`Stepper > renders with neutral color correctly 1`] = `
 `;
 
 exports[`Stepper > renders with size lg horizontal correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-6"></svg></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-6"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+32px)] end-[calc(-50%+32px)]"></div>
       </div>
-      <div class="mt-3">
-        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-base">Address</div>
-        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-base">Add your address here</div>
+      <div data-slot="wrapper" class="mt-3">
+        <div id="reka-stepper-item-title-v-0" data-slot="title" class="font-medium text-default text-base">Address</div>
+        <div id="reka-stepper-item-description-v-1" data-slot="description" class="text-muted text-wrap text-base">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-6"></svg></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-6"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+32px)] end-[calc(-50%+32px)]"></div>
       </div>
-      <div class="mt-3">
-        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-base">Shipping</div>
-        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-base">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-3">
+        <div id="reka-stepper-item-title-v-2" data-slot="title" class="font-medium text-default text-base">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" data-slot="description" class="text-muted text-wrap text-base">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-3">
-        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-base">Checkout</div>
-        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-base">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-3">
+        <div id="reka-stepper-item-title-v-4" data-slot="title" class="font-medium text-default text-base">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" data-slot="description" class="text-muted text-wrap text-base">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -505,39 +505,39 @@ exports[`Stepper > renders with size lg horizontal correctly 1`] = `
 `;
 
 exports[`Stepper > renders with size lg vertical correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
-  <div class="flex flex-col gap-4">
-    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-3">
-      <div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-6"></svg></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" data-slot="root" class="flex gap-4">
+  <div data-slot="header" class="flex flex-col gap-4">
+    <div aria-current="true" data-state="active" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-3">
+      <div data-slot="container" class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-6"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[54px]"></div>
       </div>
-      <div class="mt-3">
-        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-base">Address</div>
-        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-base">Add your address here</div>
+      <div data-slot="wrapper" class="mt-3">
+        <div id="reka-stepper-item-title-v-0" data-slot="title" class="font-medium text-default text-base">Address</div>
+        <div id="reka-stepper-item-description-v-1" data-slot="description" class="text-muted text-wrap text-base">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-3">
-      <div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-6"></svg></div>
+    <div data-state="inactive" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-3">
+      <div data-slot="container" class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-6"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[54px]"></div>
       </div>
-      <div class="mt-3">
-        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-base">Shipping</div>
-        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-base">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-3">
+        <div id="reka-stepper-item-title-v-2" data-slot="title" class="font-medium text-default text-base">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" data-slot="description" class="text-muted text-wrap text-base">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-3">
-      <div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-3">
+      <div data-slot="container" class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-3">
-        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-base">Checkout</div>
-        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-base">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-3">
+        <div id="reka-stepper-item-title-v-4" data-slot="title" class="font-medium text-default text-base">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" data-slot="description" class="text-muted text-wrap text-base">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -547,39 +547,39 @@ exports[`Stepper > renders with size lg vertical correctly 1`] = `
 `;
 
 exports[`Stepper > renders with size md horizontal correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -589,39 +589,39 @@ exports[`Stepper > renders with size md horizontal correctly 1`] = `
 `;
 
 exports[`Stepper > renders with size md vertical correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
-  <div class="flex flex-col gap-4">
-    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-2.5">
-      <div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" data-slot="root" class="flex gap-4">
+  <div data-slot="header" class="flex flex-col gap-4">
+    <div aria-current="true" data-state="active" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-2.5">
+      <div data-slot="container" class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[46px]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-2.5">
-      <div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+    <div data-state="inactive" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-2.5">
+      <div data-slot="container" class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[46px]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-2.5">
-      <div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-2.5">
+      <div data-slot="container" class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -631,39 +631,39 @@ exports[`Stepper > renders with size md vertical correctly 1`] = `
 `;
 
 exports[`Stepper > renders with size sm horizontal correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-4"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+20px)] end-[calc(-50%+20px)]"></div>
       </div>
-      <div class="mt-2">
-        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-xs">Address</div>
-        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-xs">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2">
+        <div id="reka-stepper-item-title-v-0" data-slot="title" class="font-medium text-default text-xs">Address</div>
+        <div id="reka-stepper-item-description-v-1" data-slot="description" class="text-muted text-wrap text-xs">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-4"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+20px)] end-[calc(-50%+20px)]"></div>
       </div>
-      <div class="mt-2">
-        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-xs">Shipping</div>
-        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2">
+        <div id="reka-stepper-item-title-v-2" data-slot="title" class="font-medium text-default text-xs">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" data-slot="description" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2">
-        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-xs">Checkout</div>
-        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-xs">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2">
+        <div id="reka-stepper-item-title-v-4" data-slot="title" class="font-medium text-default text-xs">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" data-slot="description" class="text-muted text-wrap text-xs">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -673,39 +673,39 @@ exports[`Stepper > renders with size sm horizontal correctly 1`] = `
 `;
 
 exports[`Stepper > renders with size sm vertical correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
-  <div class="flex flex-col gap-4">
-    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-2">
-      <div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" data-slot="root" class="flex gap-4">
+  <div data-slot="header" class="flex flex-col gap-4">
+    <div aria-current="true" data-state="active" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-2">
+      <div data-slot="container" class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-4"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[38px]"></div>
       </div>
-      <div class="mt-2">
-        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-xs">Address</div>
-        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-xs">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2">
+        <div id="reka-stepper-item-title-v-0" data-slot="title" class="font-medium text-default text-xs">Address</div>
+        <div id="reka-stepper-item-description-v-1" data-slot="description" class="text-muted text-wrap text-xs">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-2">
-      <div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg></div>
+    <div data-state="inactive" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-2">
+      <div data-slot="container" class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-4"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[38px]"></div>
       </div>
-      <div class="mt-2">
-        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-xs">Shipping</div>
-        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2">
+        <div id="reka-stepper-item-title-v-2" data-slot="title" class="font-medium text-default text-xs">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" data-slot="description" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-2">
-      <div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-2">
+      <div data-slot="container" class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2">
-        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-xs">Checkout</div>
-        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-xs">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2">
+        <div id="reka-stepper-item-title-v-4" data-slot="title" class="font-medium text-default text-xs">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" data-slot="description" class="text-muted text-wrap text-xs">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -715,39 +715,39 @@ exports[`Stepper > renders with size sm vertical correctly 1`] = `
 `;
 
 exports[`Stepper > renders with size xl horizontal correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-7"></svg></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-7"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+36px)] end-[calc(-50%+36px)]"></div>
       </div>
-      <div class="mt-3.5">
-        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-lg">Address</div>
-        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-lg">Add your address here</div>
+      <div data-slot="wrapper" class="mt-3.5">
+        <div id="reka-stepper-item-title-v-0" data-slot="title" class="font-medium text-default text-lg">Address</div>
+        <div id="reka-stepper-item-description-v-1" data-slot="description" class="text-muted text-wrap text-lg">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-7"></svg></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-7"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+36px)] end-[calc(-50%+36px)]"></div>
       </div>
-      <div class="mt-3.5">
-        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-lg">Shipping</div>
-        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-lg">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-3.5">
+        <div id="reka-stepper-item-title-v-2" data-slot="title" class="font-medium text-default text-lg">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" data-slot="description" class="text-muted text-wrap text-lg">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-3.5">
-        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-lg">Checkout</div>
-        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-lg">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-3.5">
+        <div id="reka-stepper-item-title-v-4" data-slot="title" class="font-medium text-default text-lg">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" data-slot="description" class="text-muted text-wrap text-lg">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -757,39 +757,39 @@ exports[`Stepper > renders with size xl horizontal correctly 1`] = `
 `;
 
 exports[`Stepper > renders with size xl vertical correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
-  <div class="flex flex-col gap-4">
-    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-3.5">
-      <div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-7"></svg></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" data-slot="root" class="flex gap-4">
+  <div data-slot="header" class="flex flex-col gap-4">
+    <div aria-current="true" data-state="active" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-3.5">
+      <div data-slot="container" class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-7"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[62px]"></div>
       </div>
-      <div class="mt-3.5">
-        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-lg">Address</div>
-        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-lg">Add your address here</div>
+      <div data-slot="wrapper" class="mt-3.5">
+        <div id="reka-stepper-item-title-v-0" data-slot="title" class="font-medium text-default text-lg">Address</div>
+        <div id="reka-stepper-item-description-v-1" data-slot="description" class="text-muted text-wrap text-lg">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-3.5">
-      <div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-7"></svg></div>
+    <div data-state="inactive" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-3.5">
+      <div data-slot="container" class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-7"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[62px]"></div>
       </div>
-      <div class="mt-3.5">
-        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-lg">Shipping</div>
-        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-lg">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-3.5">
+        <div id="reka-stepper-item-title-v-2" data-slot="title" class="font-medium text-default text-lg">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" data-slot="description" class="text-muted text-wrap text-lg">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-3.5">
-      <div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-3.5">
+      <div data-slot="container" class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-3.5">
-        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-lg">Checkout</div>
-        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-lg">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-3.5">
+        <div id="reka-stepper-item-title-v-4" data-slot="title" class="font-medium text-default text-lg">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" data-slot="description" class="text-muted text-wrap text-lg">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -799,39 +799,39 @@ exports[`Stepper > renders with size xl vertical correctly 1`] = `
 `;
 
 exports[`Stepper > renders with size xs horizontal correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-3"></svg></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+16px)] end-[calc(-50%+16px)]"></div>
       </div>
-      <div class="mt-1.5">
-        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-xs">Address</div>
-        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-xs">Add your address here</div>
+      <div data-slot="wrapper" class="mt-1.5">
+        <div id="reka-stepper-item-title-v-0" data-slot="title" class="font-medium text-default text-xs">Address</div>
+        <div id="reka-stepper-item-description-v-1" data-slot="description" class="text-muted text-wrap text-xs">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-3"></svg></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+16px)] end-[calc(-50%+16px)]"></div>
       </div>
-      <div class="mt-1.5">
-        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-xs">Shipping</div>
-        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-1.5">
+        <div id="reka-stepper-item-title-v-2" data-slot="title" class="font-medium text-default text-xs">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" data-slot="description" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-1.5">
-        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-xs">Checkout</div>
-        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-xs">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-1.5">
+        <div id="reka-stepper-item-title-v-4" data-slot="title" class="font-medium text-default text-xs">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" data-slot="description" class="text-muted text-wrap text-xs">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -841,39 +841,39 @@ exports[`Stepper > renders with size xs horizontal correctly 1`] = `
 `;
 
 exports[`Stepper > renders with size xs vertical correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
-  <div class="flex flex-col gap-4">
-    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-1.5">
-      <div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-3"></svg></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" data-slot="root" class="flex gap-4">
+  <div data-slot="header" class="flex flex-col gap-4">
+    <div aria-current="true" data-state="active" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-1.5">
+      <div data-slot="container" class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[30px]"></div>
       </div>
-      <div class="mt-1.5">
-        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-xs">Address</div>
-        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-xs">Add your address here</div>
+      <div data-slot="wrapper" class="mt-1.5">
+        <div id="reka-stepper-item-title-v-0" data-slot="title" class="font-medium text-default text-xs">Address</div>
+        <div id="reka-stepper-item-description-v-1" data-slot="description" class="text-muted text-wrap text-xs">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-1.5">
-      <div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-3"></svg></div>
+    <div data-state="inactive" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-1.5">
+      <div data-slot="container" class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[30px]"></div>
       </div>
-      <div class="mt-1.5">
-        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-xs">Shipping</div>
-        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-1.5">
+        <div id="reka-stepper-item-title-v-2" data-slot="title" class="font-medium text-default text-xs">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" data-slot="description" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-1.5">
-      <div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-1.5">
+      <div data-slot="container" class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-1.5">
-        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-xs">Checkout</div>
-        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-xs">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-1.5">
+        <div id="reka-stepper-item-title-v-4" data-slot="title" class="font-medium text-default text-xs">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" data-slot="description" class="text-muted text-wrap text-xs">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -883,39 +883,39 @@ exports[`Stepper > renders with size xs vertical correctly 1`] = `
 `;
 
 exports[`Stepper > renders with title slot correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Title slot</div>
-        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0" data-slot="title" class="font-medium text-default text-sm">Title slot</div>
+        <div id="reka-stepper-item-description-v-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Title slot</div>
-        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-2" data-slot="title" class="font-medium text-default text-sm">Title slot</div>
+        <div id="reka-stepper-item-description-v-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Title slot</div>
-        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-4" data-slot="title" class="font-medium text-default text-sm">Title slot</div>
+        <div id="reka-stepper-item-description-v-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -925,39 +925,39 @@ exports[`Stepper > renders with title slot correctly 1`] = `
 `;
 
 exports[`Stepper > renders with ui correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0" class="text-default text-sm font-bold">Address</div>
-        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0" data-slot="title" class="text-default text-sm font-bold">Address</div>
+        <div id="reka-stepper-item-description-v-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-2" class="text-default text-sm font-bold">Shipping</div>
-        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-2" data-slot="title" class="text-default text-sm font-bold">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-4" class="text-default text-sm font-bold">Checkout</div>
-        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-4" data-slot="title" class="text-default text-sm font-bold">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -967,39 +967,39 @@ exports[`Stepper > renders with ui correctly 1`] = `
 `;
 
 exports[`Stepper > renders without linear correctly 1`] = `
-"<div role="group" aria-label="progress" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+"<div role="group" aria-label="progress" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
diff --git a/test/components/__snapshots__/Stepper.spec.ts.snap b/test/components/__snapshots__/Stepper.spec.ts.snap
index 7a12e681fe..ded33f34ca 100644
--- a/test/components/__snapshots__/Stepper.spec.ts.snap
+++ b/test/components/__snapshots__/Stepper.spec.ts.snap
@@ -1,39 +1,39 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Stepper > renders with as correctly 1`] = `
-"<section role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
+"<section role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -43,39 +43,39 @@ exports[`Stepper > renders with as correctly 1`] = `
 `;
 
 exports[`Stepper > renders with class correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex flex-col gap-8">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex flex-col gap-8">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -85,81 +85,81 @@ exports[`Stepper > renders with class correctly 1`] = `
 `;
 
 exports[`Stepper > renders with content slot correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
-  <div class="size-full">Content slot</div>
+  <div data-slot="content" class="size-full">Content slot</div>
   <div aria-live="polite" aria-atomic="true" role="status" style="transform: translateX(-100%); position: absolute; pointer-events: none; opacity: 0; margin: 0px;"> Step 0 of 3</div>
 </div>"
 `;
 
 exports[`Stepper > renders with custom slot correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -169,39 +169,39 @@ exports[`Stepper > renders with custom slot correctly 1`] = `
 `;
 
 exports[`Stepper > renders with default slot correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -211,39 +211,39 @@ exports[`Stepper > renders with default slot correctly 1`] = `
 `;
 
 exports[`Stepper > renders with defaultValue correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div data-state="completed" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="completed" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div data-state="completed" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="completed" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -253,39 +253,39 @@ exports[`Stepper > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`Stepper > renders with description slot correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Description slot</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" data-slot="description" class="text-muted text-wrap text-sm">Description slot</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Description slot</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" data-slot="description" class="text-muted text-wrap text-sm">Description slot</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Description slot</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" data-slot="description" class="text-muted text-wrap text-sm">Description slot</div>
       </div>
     </div>
   </div>
@@ -295,39 +295,39 @@ exports[`Stepper > renders with description slot correctly 1`] = `
 `;
 
 exports[`Stepper > renders with indicator slot correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">Indicator slot</div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">Indicator slot</div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">Indicator slot</div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">Indicator slot</div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">Indicator slot</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">Indicator slot</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -337,39 +337,39 @@ exports[`Stepper > renders with indicator slot correctly 1`] = `
 `;
 
 exports[`Stepper > renders with items correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -379,39 +379,39 @@ exports[`Stepper > renders with items correctly 1`] = `
 `;
 
 exports[`Stepper > renders with modelValue correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div data-state="completed" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="completed" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div data-state="completed" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="completed" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -421,39 +421,39 @@ exports[`Stepper > renders with modelValue correctly 1`] = `
 `;
 
 exports[`Stepper > renders with neutral color correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted focus-visible:outline-inverted">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted focus-visible:outline-inverted">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-inverted start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted focus-visible:outline-inverted">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted focus-visible:outline-inverted">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-inverted start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted focus-visible:outline-inverted">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted focus-visible:outline-inverted">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -463,39 +463,39 @@ exports[`Stepper > renders with neutral color correctly 1`] = `
 `;
 
 exports[`Stepper > renders with size lg horizontal correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-6" aria-hidden="true"></span></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-6" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+32px)] end-[calc(-50%+32px)]"></div>
       </div>
-      <div class="mt-3">
-        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-base">Address</div>
-        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-base">Add your address here</div>
+      <div data-slot="wrapper" class="mt-3">
+        <div id="reka-stepper-item-title-v-0-0-0" data-slot="title" class="font-medium text-default text-base">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" data-slot="description" class="text-muted text-wrap text-base">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-6" aria-hidden="true"></span></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-6" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+32px)] end-[calc(-50%+32px)]"></div>
       </div>
-      <div class="mt-3">
-        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-base">Shipping</div>
-        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-base">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-3">
+        <div id="reka-stepper-item-title-v-0-0-2" data-slot="title" class="font-medium text-default text-base">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" data-slot="description" class="text-muted text-wrap text-base">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-3">
-        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-base">Checkout</div>
-        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-base">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-3">
+        <div id="reka-stepper-item-title-v-0-0-4" data-slot="title" class="font-medium text-default text-base">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" data-slot="description" class="text-muted text-wrap text-base">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -505,39 +505,39 @@ exports[`Stepper > renders with size lg horizontal correctly 1`] = `
 `;
 
 exports[`Stepper > renders with size lg vertical correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
-  <div class="flex flex-col gap-4">
-    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-3">
-      <div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-6" aria-hidden="true"></span></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" data-slot="root" class="flex gap-4">
+  <div data-slot="header" class="flex flex-col gap-4">
+    <div aria-current="true" data-state="active" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-3">
+      <div data-slot="container" class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-6" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[54px]"></div>
       </div>
-      <div class="mt-3">
-        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-base">Address</div>
-        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-base">Add your address here</div>
+      <div data-slot="wrapper" class="mt-3">
+        <div id="reka-stepper-item-title-v-0-0-0" data-slot="title" class="font-medium text-default text-base">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" data-slot="description" class="text-muted text-wrap text-base">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-3">
-      <div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-6" aria-hidden="true"></span></div>
+    <div data-state="inactive" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-3">
+      <div data-slot="container" class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-6" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[54px]"></div>
       </div>
-      <div class="mt-3">
-        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-base">Shipping</div>
-        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-base">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-3">
+        <div id="reka-stepper-item-title-v-0-0-2" data-slot="title" class="font-medium text-default text-base">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" data-slot="description" class="text-muted text-wrap text-base">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-3">
-      <div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-3">
+      <div data-slot="container" class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-3">
-        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-base">Checkout</div>
-        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-base">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-3">
+        <div id="reka-stepper-item-title-v-0-0-4" data-slot="title" class="font-medium text-default text-base">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" data-slot="description" class="text-muted text-wrap text-base">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -547,39 +547,39 @@ exports[`Stepper > renders with size lg vertical correctly 1`] = `
 `;
 
 exports[`Stepper > renders with size md horizontal correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -589,39 +589,39 @@ exports[`Stepper > renders with size md horizontal correctly 1`] = `
 `;
 
 exports[`Stepper > renders with size md vertical correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
-  <div class="flex flex-col gap-4">
-    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-2.5">
-      <div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" data-slot="root" class="flex gap-4">
+  <div data-slot="header" class="flex flex-col gap-4">
+    <div aria-current="true" data-state="active" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-2.5">
+      <div data-slot="container" class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[46px]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-2.5">
-      <div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
+    <div data-state="inactive" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-2.5">
+      <div data-slot="container" class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[46px]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-2.5">
-      <div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-2.5">
+      <div data-slot="container" class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -631,39 +631,39 @@ exports[`Stepper > renders with size md vertical correctly 1`] = `
 `;
 
 exports[`Stepper > renders with size sm horizontal correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-4" aria-hidden="true"></span></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-4" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+20px)] end-[calc(-50%+20px)]"></div>
       </div>
-      <div class="mt-2">
-        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-xs">Address</div>
-        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-xs">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2">
+        <div id="reka-stepper-item-title-v-0-0-0" data-slot="title" class="font-medium text-default text-xs">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" data-slot="description" class="text-muted text-wrap text-xs">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-4" aria-hidden="true"></span></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-4" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+20px)] end-[calc(-50%+20px)]"></div>
       </div>
-      <div class="mt-2">
-        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-xs">Shipping</div>
-        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2">
+        <div id="reka-stepper-item-title-v-0-0-2" data-slot="title" class="font-medium text-default text-xs">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" data-slot="description" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2">
-        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-xs">Checkout</div>
-        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-xs">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2">
+        <div id="reka-stepper-item-title-v-0-0-4" data-slot="title" class="font-medium text-default text-xs">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" data-slot="description" class="text-muted text-wrap text-xs">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -673,39 +673,39 @@ exports[`Stepper > renders with size sm horizontal correctly 1`] = `
 `;
 
 exports[`Stepper > renders with size sm vertical correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
-  <div class="flex flex-col gap-4">
-    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-2">
-      <div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-4" aria-hidden="true"></span></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" data-slot="root" class="flex gap-4">
+  <div data-slot="header" class="flex flex-col gap-4">
+    <div aria-current="true" data-state="active" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-2">
+      <div data-slot="container" class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-4" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[38px]"></div>
       </div>
-      <div class="mt-2">
-        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-xs">Address</div>
-        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-xs">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2">
+        <div id="reka-stepper-item-title-v-0-0-0" data-slot="title" class="font-medium text-default text-xs">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" data-slot="description" class="text-muted text-wrap text-xs">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-2">
-      <div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-4" aria-hidden="true"></span></div>
+    <div data-state="inactive" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-2">
+      <div data-slot="container" class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-4" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[38px]"></div>
       </div>
-      <div class="mt-2">
-        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-xs">Shipping</div>
-        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2">
+        <div id="reka-stepper-item-title-v-0-0-2" data-slot="title" class="font-medium text-default text-xs">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" data-slot="description" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-2">
-      <div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-2">
+      <div data-slot="container" class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2">
-        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-xs">Checkout</div>
-        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-xs">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2">
+        <div id="reka-stepper-item-title-v-0-0-4" data-slot="title" class="font-medium text-default text-xs">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" data-slot="description" class="text-muted text-wrap text-xs">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -715,39 +715,39 @@ exports[`Stepper > renders with size sm vertical correctly 1`] = `
 `;
 
 exports[`Stepper > renders with size xl horizontal correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-7" aria-hidden="true"></span></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-7" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+36px)] end-[calc(-50%+36px)]"></div>
       </div>
-      <div class="mt-3.5">
-        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-lg">Address</div>
-        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-lg">Add your address here</div>
+      <div data-slot="wrapper" class="mt-3.5">
+        <div id="reka-stepper-item-title-v-0-0-0" data-slot="title" class="font-medium text-default text-lg">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" data-slot="description" class="text-muted text-wrap text-lg">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-7" aria-hidden="true"></span></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-7" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+36px)] end-[calc(-50%+36px)]"></div>
       </div>
-      <div class="mt-3.5">
-        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-lg">Shipping</div>
-        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-lg">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-3.5">
+        <div id="reka-stepper-item-title-v-0-0-2" data-slot="title" class="font-medium text-default text-lg">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" data-slot="description" class="text-muted text-wrap text-lg">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-3.5">
-        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-lg">Checkout</div>
-        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-lg">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-3.5">
+        <div id="reka-stepper-item-title-v-0-0-4" data-slot="title" class="font-medium text-default text-lg">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" data-slot="description" class="text-muted text-wrap text-lg">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -757,39 +757,39 @@ exports[`Stepper > renders with size xl horizontal correctly 1`] = `
 `;
 
 exports[`Stepper > renders with size xl vertical correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
-  <div class="flex flex-col gap-4">
-    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-3.5">
-      <div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-7" aria-hidden="true"></span></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" data-slot="root" class="flex gap-4">
+  <div data-slot="header" class="flex flex-col gap-4">
+    <div aria-current="true" data-state="active" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-3.5">
+      <div data-slot="container" class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-7" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[62px]"></div>
       </div>
-      <div class="mt-3.5">
-        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-lg">Address</div>
-        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-lg">Add your address here</div>
+      <div data-slot="wrapper" class="mt-3.5">
+        <div id="reka-stepper-item-title-v-0-0-0" data-slot="title" class="font-medium text-default text-lg">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" data-slot="description" class="text-muted text-wrap text-lg">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-3.5">
-      <div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-7" aria-hidden="true"></span></div>
+    <div data-state="inactive" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-3.5">
+      <div data-slot="container" class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-7" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[62px]"></div>
       </div>
-      <div class="mt-3.5">
-        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-lg">Shipping</div>
-        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-lg">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-3.5">
+        <div id="reka-stepper-item-title-v-0-0-2" data-slot="title" class="font-medium text-default text-lg">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" data-slot="description" class="text-muted text-wrap text-lg">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-3.5">
-      <div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-3.5">
+      <div data-slot="container" class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-3.5">
-        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-lg">Checkout</div>
-        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-lg">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-3.5">
+        <div id="reka-stepper-item-title-v-0-0-4" data-slot="title" class="font-medium text-default text-lg">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" data-slot="description" class="text-muted text-wrap text-lg">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -799,39 +799,39 @@ exports[`Stepper > renders with size xl vertical correctly 1`] = `
 `;
 
 exports[`Stepper > renders with size xs horizontal correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-3" aria-hidden="true"></span></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-3" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+16px)] end-[calc(-50%+16px)]"></div>
       </div>
-      <div class="mt-1.5">
-        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-xs">Address</div>
-        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-xs">Add your address here</div>
+      <div data-slot="wrapper" class="mt-1.5">
+        <div id="reka-stepper-item-title-v-0-0-0" data-slot="title" class="font-medium text-default text-xs">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" data-slot="description" class="text-muted text-wrap text-xs">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-3" aria-hidden="true"></span></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-3" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+16px)] end-[calc(-50%+16px)]"></div>
       </div>
-      <div class="mt-1.5">
-        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-xs">Shipping</div>
-        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-1.5">
+        <div id="reka-stepper-item-title-v-0-0-2" data-slot="title" class="font-medium text-default text-xs">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" data-slot="description" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-1.5">
-        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-xs">Checkout</div>
-        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-xs">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-1.5">
+        <div id="reka-stepper-item-title-v-0-0-4" data-slot="title" class="font-medium text-default text-xs">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" data-slot="description" class="text-muted text-wrap text-xs">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -841,39 +841,39 @@ exports[`Stepper > renders with size xs horizontal correctly 1`] = `
 `;
 
 exports[`Stepper > renders with size xs vertical correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
-  <div class="flex flex-col gap-4">
-    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-1.5">
-      <div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-3" aria-hidden="true"></span></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" data-slot="root" class="flex gap-4">
+  <div data-slot="header" class="flex flex-col gap-4">
+    <div aria-current="true" data-state="active" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-1.5">
+      <div data-slot="container" class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-3" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[30px]"></div>
       </div>
-      <div class="mt-1.5">
-        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-xs">Address</div>
-        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-xs">Add your address here</div>
+      <div data-slot="wrapper" class="mt-1.5">
+        <div id="reka-stepper-item-title-v-0-0-0" data-slot="title" class="font-medium text-default text-xs">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" data-slot="description" class="text-muted text-wrap text-xs">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-1.5">
-      <div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-3" aria-hidden="true"></span></div>
+    <div data-state="inactive" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-1.5">
+      <div data-slot="container" class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-3" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[30px]"></div>
       </div>
-      <div class="mt-1.5">
-        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-xs">Shipping</div>
-        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-1.5">
+        <div id="reka-stepper-item-title-v-0-0-2" data-slot="title" class="font-medium text-default text-xs">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" data-slot="description" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-1.5">
-      <div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" data-slot="item" class="group relative w-full flex text-start gap-1.5">
+      <div data-slot="container" class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-1.5">
-        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-xs">Checkout</div>
-        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-xs">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-1.5">
+        <div id="reka-stepper-item-title-v-0-0-4" data-slot="title" class="font-medium text-default text-xs">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" data-slot="description" class="text-muted text-wrap text-xs">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -883,39 +883,39 @@ exports[`Stepper > renders with size xs vertical correctly 1`] = `
 `;
 
 exports[`Stepper > renders with title slot correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Title slot</div>
-        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-0" data-slot="title" class="font-medium text-default text-sm">Title slot</div>
+        <div id="reka-stepper-item-description-v-0-0-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Title slot</div>
-        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-2" data-slot="title" class="font-medium text-default text-sm">Title slot</div>
+        <div id="reka-stepper-item-description-v-0-0-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Title slot</div>
-        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-4" data-slot="title" class="font-medium text-default text-sm">Title slot</div>
+        <div id="reka-stepper-item-description-v-0-0-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -925,39 +925,39 @@ exports[`Stepper > renders with title slot correctly 1`] = `
 `;
 
 exports[`Stepper > renders with ui correctly 1`] = `
-"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-0" class="text-default text-sm font-bold">Address</div>
-        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-0" data-slot="title" class="text-default text-sm font-bold">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-2" class="text-default text-sm font-bold">Shipping</div>
-        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-2" data-slot="title" class="text-default text-sm font-bold">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-4" class="text-default text-sm font-bold">Checkout</div>
-        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-4" data-slot="title" class="text-default text-sm font-bold">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
@@ -967,39 +967,39 @@ exports[`Stepper > renders with ui correctly 1`] = `
 `;
 
 exports[`Stepper > renders without linear correctly 1`] = `
-"<div role="group" aria-label="progress" data-orientation="horizontal" class="flex gap-4 flex-col">
-  <div class="flex">
-    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
+"<div role="group" aria-label="progress" data-orientation="horizontal" data-slot="root" class="flex gap-4 flex-col">
+  <div data-slot="header" class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
-        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-0" data-slot="title" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" data-slot="description" class="text-muted text-wrap text-sm">Add your address here</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true" data-slot="icon"></span></div>
         </button>
-        <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" data-slot="separator" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
-        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-2" data-slot="title" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" data-slot="description" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
-      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
-          <div class="flex items-center justify-center size-full">3</div>
+    <div data-state="inactive" data-orientation="horizontal" data-slot="item" class="group text-center relative w-full">
+      <div data-slot="container" class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" data-slot="trigger" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div data-slot="indicator" class="flex items-center justify-center size-full">3</div>
         </button>
         <!--v-if-->
       </div>
-      <div class="mt-2.5">
-        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
-        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      <div data-slot="wrapper" class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-4" data-slot="title" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" data-slot="description" class="text-muted text-wrap text-sm">Confirm your order</div>
       </div>
     </div>
   </div>
diff --git a/test/components/__snapshots__/Switch-vue.spec.ts.snap b/test/components/__snapshots__/Switch-vue.spec.ts.snap
index 280df1d126..23651a1779 100644
--- a/test/components/__snapshots__/Switch-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Switch-vue.spec.ts.snap
@@ -1,8 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Switch > renders with ariaLabel correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button aria-label="Aria label" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button aria-label="Aria label" data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -10,8 +10,8 @@ exports[`Switch > renders with ariaLabel correctly 1`] = `
 `;
 
 exports[`Switch > renders with as correctly 1`] = `
-"<section class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<section data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -19,8 +19,8 @@ exports[`Switch > renders with as correctly 1`] = `
 `;
 
 exports[`Switch > renders with checkedIcon correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="absolute shrink-0 group-data-[state=unchecked]:text-dimmed opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-primary group-data-[state=checked]:opacity-100"></svg><!--v-if--></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="absolute shrink-0 group-data-[state=unchecked]:text-dimmed opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-primary group-data-[state=checked]:opacity-100"></svg><!--v-if--></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -28,8 +28,8 @@ exports[`Switch > renders with checkedIcon correctly 1`] = `
 `;
 
 exports[`Switch > renders with class correctly 1`] = `
-"<div class="relative items-start inline-flex">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative items-start inline-flex">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -37,8 +37,8 @@ exports[`Switch > renders with class correctly 1`] = `
 `;
 
 exports[`Switch > renders with color neutral correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-inverted focus-visible:outline-inverted w-9" id="v-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-inverted focus-visible:outline-inverted w-9" id="v-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -46,8 +46,8 @@ exports[`Switch > renders with color neutral correctly 1`] = `
 `;
 
 exports[`Switch > renders with defaultValue correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -55,30 +55,30 @@ exports[`Switch > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`Switch > renders with description correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
-  <div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Label</label>
-    <p class="text-muted">Description</p>
+  <div data-slot="wrapper" class="ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Label</label>
+    <p data-slot="description" class="text-muted">Description</p>
   </div>
 </div>"
 `;
 
 exports[`Switch > renders with description slot correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
-  <div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Description slot</label>
+  <div data-slot="wrapper" class="ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Description slot</label>
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Switch > renders with disabled correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9 cursor-not-allowed opacity-75" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9 cursor-not-allowed opacity-75" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -86,8 +86,8 @@ exports[`Switch > renders with disabled correctly 1`] = `
 `;
 
 exports[`Switch > renders with id correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="id" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="id" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -95,30 +95,30 @@ exports[`Switch > renders with id correctly 1`] = `
 `;
 
 exports[`Switch > renders with label correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
-  <div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Label</label>
+  <div data-slot="wrapper" class="ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Label</label>
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Switch > renders with label slot correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
-  <div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Label slot</label>
+  <div data-slot="wrapper" class="ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Label slot</label>
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Switch > renders with loading correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9 cursor-not-allowed opacity-75" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="absolute shrink-0 group-data-[state=unchecked]:text-dimmed opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-primary group-data-[state=checked]:opacity-100 group-data-[state=unchecked]:opacity-100 animate-spin"></svg></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9 cursor-not-allowed opacity-75" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="absolute shrink-0 group-data-[state=unchecked]:text-dimmed opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-primary group-data-[state=checked]:opacity-100 group-data-[state=unchecked]:opacity-100 animate-spin"></svg></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -126,8 +126,8 @@ exports[`Switch > renders with loading correctly 1`] = `
 `;
 
 exports[`Switch > renders with loadingIcon correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9 cursor-not-allowed opacity-75" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="absolute shrink-0 group-data-[state=unchecked]:text-dimmed opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-primary group-data-[state=checked]:opacity-100 group-data-[state=unchecked]:opacity-100 animate-spin"></svg></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9 cursor-not-allowed opacity-75" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="absolute shrink-0 group-data-[state=unchecked]:text-dimmed opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-primary group-data-[state=checked]:opacity-100 group-data-[state=unchecked]:opacity-100 animate-spin"></svg></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -135,8 +135,8 @@ exports[`Switch > renders with loadingIcon correctly 1`] = `
 `;
 
 exports[`Switch > renders with modelValue correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -144,8 +144,8 @@ exports[`Switch > renders with modelValue correctly 1`] = `
 `;
 
 exports[`Switch > renders with name correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -153,19 +153,19 @@ exports[`Switch > renders with name correctly 1`] = `
 `;
 
 exports[`Switch > renders with required correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="true" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="true" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
-  <div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</label>
+  <div data-slot="wrapper" class="ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</label>
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Switch > renders with size lg correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-10" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4.5 data-[state=checked]:translate-x-4.5 data-[state=checked]:rtl:-translate-x-4.5"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-10" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4.5 data-[state=checked]:translate-x-4.5 data-[state=checked]:rtl:-translate-x-4.5"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -173,8 +173,8 @@ exports[`Switch > renders with size lg correctly 1`] = `
 `;
 
 exports[`Switch > renders with size md correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -182,8 +182,8 @@ exports[`Switch > renders with size md correctly 1`] = `
 `;
 
 exports[`Switch > renders with size sm correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-4"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-8" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-3.5 data-[state=checked]:translate-x-3.5 data-[state=checked]:rtl:-translate-x-3.5"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-8" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-3.5 data-[state=checked]:translate-x-3.5 data-[state=checked]:rtl:-translate-x-3.5"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -191,8 +191,8 @@ exports[`Switch > renders with size sm correctly 1`] = `
 `;
 
 exports[`Switch > renders with size xl correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-6"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-11" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-5 data-[state=checked]:translate-x-5 data-[state=checked]:rtl:-translate-x-5"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-11" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-5 data-[state=checked]:translate-x-5 data-[state=checked]:rtl:-translate-x-5"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -200,8 +200,8 @@ exports[`Switch > renders with size xl correctly 1`] = `
 `;
 
 exports[`Switch > renders with size xs correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-4"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-7" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-3 data-[state=checked]:translate-x-3 data-[state=checked]:rtl:-translate-x-3"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-7" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-3 data-[state=checked]:translate-x-3 data-[state=checked]:rtl:-translate-x-3"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -209,8 +209,8 @@ exports[`Switch > renders with size xs correctly 1`] = `
 `;
 
 exports[`Switch > renders with ui correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -218,8 +218,8 @@ exports[`Switch > renders with ui correctly 1`] = `
 `;
 
 exports[`Switch > renders with uncheckedIcon correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="absolute shrink-0 group-data-[state=unchecked]:text-dimmed opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-primary group-data-[state=unchecked]:opacity-100"></svg></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="absolute shrink-0 group-data-[state=unchecked]:text-dimmed opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-primary group-data-[state=unchecked]:opacity-100"></svg></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -227,8 +227,8 @@ exports[`Switch > renders with uncheckedIcon correctly 1`] = `
 `;
 
 exports[`Switch > renders with value correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="value"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="value"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
diff --git a/test/components/__snapshots__/Switch.spec.ts.snap b/test/components/__snapshots__/Switch.spec.ts.snap
index d0a344085a..c7a2d350e4 100644
--- a/test/components/__snapshots__/Switch.spec.ts.snap
+++ b/test/components/__snapshots__/Switch.spec.ts.snap
@@ -1,8 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Switch > renders with ariaLabel correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button aria-label="Aria label" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button aria-label="Aria label" data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -10,8 +10,8 @@ exports[`Switch > renders with ariaLabel correctly 1`] = `
 `;
 
 exports[`Switch > renders with as correctly 1`] = `
-"<section class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<section data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -19,8 +19,8 @@ exports[`Switch > renders with as correctly 1`] = `
 `;
 
 exports[`Switch > renders with checkedIcon correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><span class="iconify i-lucide:check absolute shrink-0 group-data-[state=unchecked]:text-dimmed opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-primary group-data-[state=checked]:opacity-100" aria-hidden="true"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><span class="iconify i-lucide:check absolute shrink-0 group-data-[state=unchecked]:text-dimmed opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-primary group-data-[state=checked]:opacity-100" aria-hidden="true" data-slot="icon"></span>
       <!--v-if--></span>
       <!--v-if-->
     </button></div>
@@ -29,8 +29,8 @@ exports[`Switch > renders with checkedIcon correctly 1`] = `
 `;
 
 exports[`Switch > renders with class correctly 1`] = `
-"<div class="relative items-start inline-flex">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative items-start inline-flex">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -38,8 +38,8 @@ exports[`Switch > renders with class correctly 1`] = `
 `;
 
 exports[`Switch > renders with color neutral correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-inverted focus-visible:outline-inverted w-9" id="v-0-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-inverted focus-visible:outline-inverted w-9" id="v-0-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -47,8 +47,8 @@ exports[`Switch > renders with color neutral correctly 1`] = `
 `;
 
 exports[`Switch > renders with defaultValue correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -56,30 +56,30 @@ exports[`Switch > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`Switch > renders with description correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
-  <div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Label</label>
-    <p class="text-muted">Description</p>
+  <div data-slot="wrapper" class="ms-2 text-sm"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Label</label>
+    <p data-slot="description" class="text-muted">Description</p>
   </div>
 </div>"
 `;
 
 exports[`Switch > renders with description slot correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
-  <div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Description slot</label>
+  <div data-slot="wrapper" class="ms-2 text-sm"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Description slot</label>
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Switch > renders with disabled correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9 cursor-not-allowed opacity-75" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9 cursor-not-allowed opacity-75" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -87,8 +87,8 @@ exports[`Switch > renders with disabled correctly 1`] = `
 `;
 
 exports[`Switch > renders with id correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="id" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="id" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -96,30 +96,30 @@ exports[`Switch > renders with id correctly 1`] = `
 `;
 
 exports[`Switch > renders with label correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
-  <div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Label</label>
+  <div data-slot="wrapper" class="ms-2 text-sm"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Label</label>
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Switch > renders with label slot correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
-  <div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Label slot</label>
+  <div data-slot="wrapper" class="ms-2 text-sm"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Label slot</label>
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Switch > renders with loading correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9 cursor-not-allowed opacity-75" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><span class="iconify i-lucide:loader-circle absolute shrink-0 group-data-[state=unchecked]:text-dimmed opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-primary group-data-[state=checked]:opacity-100 group-data-[state=unchecked]:opacity-100 animate-spin" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9 cursor-not-allowed opacity-75" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><span class="iconify i-lucide:loader-circle absolute shrink-0 group-data-[state=unchecked]:text-dimmed opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-primary group-data-[state=checked]:opacity-100 group-data-[state=unchecked]:opacity-100 animate-spin" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -127,8 +127,8 @@ exports[`Switch > renders with loading correctly 1`] = `
 `;
 
 exports[`Switch > renders with loadingIcon correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9 cursor-not-allowed opacity-75" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><span class="iconify i-lucide:loader absolute shrink-0 group-data-[state=unchecked]:text-dimmed opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-primary group-data-[state=checked]:opacity-100 group-data-[state=unchecked]:opacity-100 animate-spin" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9 cursor-not-allowed opacity-75" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><span class="iconify i-lucide:loader absolute shrink-0 group-data-[state=unchecked]:text-dimmed opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-primary group-data-[state=checked]:opacity-100 group-data-[state=unchecked]:opacity-100 animate-spin" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -136,8 +136,8 @@ exports[`Switch > renders with loadingIcon correctly 1`] = `
 `;
 
 exports[`Switch > renders with modelValue correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -145,8 +145,8 @@ exports[`Switch > renders with modelValue correctly 1`] = `
 `;
 
 exports[`Switch > renders with name correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -154,19 +154,19 @@ exports[`Switch > renders with name correctly 1`] = `
 `;
 
 exports[`Switch > renders with required correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="true" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="true" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
-  <div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</label>
+  <div data-slot="wrapper" class="ms-2 text-sm"><label for="v-0-0" data-slot="label" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</label>
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Switch > renders with size lg correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-10" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4.5 data-[state=checked]:translate-x-4.5 data-[state=checked]:rtl:-translate-x-4.5"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-10" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4.5 data-[state=checked]:translate-x-4.5 data-[state=checked]:rtl:-translate-x-4.5"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -174,8 +174,8 @@ exports[`Switch > renders with size lg correctly 1`] = `
 `;
 
 exports[`Switch > renders with size md correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -183,8 +183,8 @@ exports[`Switch > renders with size md correctly 1`] = `
 `;
 
 exports[`Switch > renders with size sm correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-4"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-8" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-3.5 data-[state=checked]:translate-x-3.5 data-[state=checked]:rtl:-translate-x-3.5"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-8" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-3.5 data-[state=checked]:translate-x-3.5 data-[state=checked]:rtl:-translate-x-3.5"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -192,8 +192,8 @@ exports[`Switch > renders with size sm correctly 1`] = `
 `;
 
 exports[`Switch > renders with size xl correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-6"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-11" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-5 data-[state=checked]:translate-x-5 data-[state=checked]:rtl:-translate-x-5"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-11" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-5 data-[state=checked]:translate-x-5 data-[state=checked]:rtl:-translate-x-5"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -201,8 +201,8 @@ exports[`Switch > renders with size xl correctly 1`] = `
 `;
 
 exports[`Switch > renders with size xs correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-4"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-7" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-3 data-[state=checked]:translate-x-3 data-[state=checked]:rtl:-translate-x-3"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-7" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-3 data-[state=checked]:translate-x-3 data-[state=checked]:rtl:-translate-x-3"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -210,8 +210,8 @@ exports[`Switch > renders with size xs correctly 1`] = `
 `;
 
 exports[`Switch > renders with ui correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -219,8 +219,8 @@ exports[`Switch > renders with ui correctly 1`] = `
 `;
 
 exports[`Switch > renders with uncheckedIcon correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><!--v-if--><span class="iconify i-lucide:x absolute shrink-0 group-data-[state=unchecked]:text-dimmed opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-primary group-data-[state=unchecked]:opacity-100" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><!--v-if--><span class="iconify i-lucide:x absolute shrink-0 group-data-[state=unchecked]:text-dimmed opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-primary group-data-[state=unchecked]:opacity-100" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
@@ -228,8 +228,8 @@ exports[`Switch > renders with uncheckedIcon correctly 1`] = `
 `;
 
 exports[`Switch > renders with value correctly 1`] = `
-"<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="value"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+"<div data-slot="root" class="relative flex items-start">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="value"><span data-state="unchecked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
       <!--v-if-->
     </button></div>
   <!--v-if-->
diff --git a/test/components/__snapshots__/Table-vue.spec.ts.snap b/test/components/__snapshots__/Table-vue.spec.ts.snap
index a08d8fa5b2..73e5528c57 100644
--- a/test/components/__snapshots__/Table-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Table-vue.spec.ts.snap
@@ -1,52 +1,52 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Table > renders with as correctly 1`] = `
-"<section class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<section data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -56,52 +56,52 @@ exports[`Table > renders with as correctly 1`] = `
 `;
 
 exports[`Table > renders with body-bottom slot correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->Body bottom slot
     </tbody>
@@ -111,51 +111,51 @@ exports[`Table > renders with body-bottom slot correctly 1`] = `
 `;
 
 exports[`Table > renders with body-top slot correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">Body top slot<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">Body top slot<tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -165,52 +165,52 @@ exports[`Table > renders with body-top slot correctly 1`] = `
 `;
 
 exports[`Table > renders with caption correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
-    <caption class="sr-only">Table caption</caption>
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
+    <caption data-slot="caption" class="sr-only">Table caption</caption>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -220,52 +220,52 @@ exports[`Table > renders with caption correctly 1`] = `
 `;
 
 exports[`Table > renders with caption slot correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
-    <caption class="sr-only">Caption slot</caption>
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
+    <caption data-slot="caption" class="sr-only">Caption slot</caption>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -275,52 +275,52 @@ exports[`Table > renders with caption slot correctly 1`] = `
 `;
 
 exports[`Table > renders with cell slot correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ID Cell slot</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ID Cell slot</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ID Cell slot</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ID Cell slot</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ID Cell slot</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ID Cell slot</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ID Cell slot</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ID Cell slot</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ID Cell slot</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ID Cell slot</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -330,52 +330,52 @@ exports[`Table > renders with cell slot correctly 1`] = `
 `;
 
 exports[`Table > renders with class correctly 1`] = `
-"<div class="overflow-auto absolute">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="overflow-auto absolute">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -385,59 +385,59 @@ exports[`Table > renders with class correctly 1`] = `
 `;
 
 exports[`Table > renders with columns correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
-            <div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Select all</label>
               <!--v-if-->
             </div>
           </div>
         </th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Date</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Email</span>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Date</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
           </button></th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <div class="text-right">Amount</div>
         </th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
       </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="lowercase">ken99@yahoo.com</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="text-right font-medium">€316.00</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
-          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-2" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-2" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
               <!--v-if-->
               <!--v-if-->
             </button>
@@ -448,27 +448,27 @@ exports[`Table > renders with columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="lowercase">Abe45@gmail.com</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="text-right font-medium">€242.00</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
-          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-4" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-4" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
               <!--v-if-->
               <!--v-if-->
             </button>
@@ -479,27 +479,27 @@ exports[`Table > renders with columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="lowercase">Monserrat44@gmail.com</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="text-right font-medium">€837.00</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
-          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-6" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-6" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
               <!--v-if-->
               <!--v-if-->
             </button>
@@ -510,27 +510,27 @@ exports[`Table > renders with columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="lowercase">Silas22@gmail.com</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="text-right font-medium">€874.00</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
-          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-8" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-8" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
               <!--v-if-->
               <!--v-if-->
             </button>
@@ -541,27 +541,27 @@ exports[`Table > renders with columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="lowercase">carmella@hotmail.com</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="text-right font-medium">€721.00</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
-          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-10" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-10" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
               <!--v-if-->
               <!--v-if-->
             </button>
@@ -573,28 +573,28 @@ exports[`Table > renders with columns correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
-    <tfoot class="relative">
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+    <tfoot data-slot="tfoot" class="relative">
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <div class="text-right font-medium">Total: €2,990.00</div>
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
       </tr>
@@ -604,52 +604,52 @@ exports[`Table > renders with columns correctly 1`] = `
 `;
 
 exports[`Table > renders with data correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -659,16 +659,16 @@ exports[`Table > renders with data correctly 1`] = `
 `;
 
 exports[`Table > renders with empty correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50"></tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50"></tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
       <tr>
-        <td colspan="0" class="py-6 text-center text-sm text-muted">There is no data</td>
+        <td colspan="0" data-slot="empty" class="py-6 text-center text-sm text-muted">There is no data</td>
       </tr>
     </tbody>
     <!--v-if-->
@@ -677,64 +677,64 @@ exports[`Table > renders with empty correctly 1`] = `
 `;
 
 exports[`Table > renders with empty slot correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
-            <div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Select all</label>
               <!--v-if-->
             </div>
           </div>
         </th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Date</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Email</span>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Date</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
           </button></th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <div class="text-right">Amount</div>
         </th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
       </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
       <tr>
-        <td colspan="7" class="py-6 text-center text-sm text-muted">Empty slot</td>
+        <td colspan="7" data-slot="empty" class="py-6 text-center text-sm text-muted">Empty slot</td>
       </tr>
     </tbody>
-    <tfoot class="relative">
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+    <tfoot data-slot="tfoot" class="relative">
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <div class="text-right font-medium">Total: €0.00</div>
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
       </tr>
@@ -744,52 +744,52 @@ exports[`Table > renders with empty slot correctly 1`] = `
 `;
 
 exports[`Table > renders with expanded slot correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -799,52 +799,52 @@ exports[`Table > renders with expanded slot correctly 1`] = `
 `;
 
 exports[`Table > renders with header slot correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">ID Header slot</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">ID Header slot</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -854,52 +854,52 @@ exports[`Table > renders with header slot correctly 1`] = `
 `;
 
 exports[`Table > renders with loading animation carousel correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -909,52 +909,52 @@ exports[`Table > renders with loading animation carousel correctly 1`] = `
 `;
 
 exports[`Table > renders with loading animation carousel-inverse correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[carousel-inverse_2s_ease-in-out_infinite] rtl:after:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[carousel-inverse_2s_ease-in-out_infinite] rtl:after:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -964,52 +964,52 @@ exports[`Table > renders with loading animation carousel-inverse correctly 1`] =
 `;
 
 exports[`Table > renders with loading animation elastic correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[elastic_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[elastic_2s_ease-in-out_infinite]">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -1019,52 +1019,52 @@ exports[`Table > renders with loading animation elastic correctly 1`] = `
 `;
 
 exports[`Table > renders with loading animation swing correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[swing_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[swing_2s_ease-in-out_infinite]">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -1074,52 +1074,52 @@ exports[`Table > renders with loading animation swing correctly 1`] = `
 `;
 
 exports[`Table > renders with loading color error correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative after:absolute after:z-[1] after:h-px after:bg-error after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative after:absolute after:z-[1] after:h-px after:bg-error after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -1129,52 +1129,52 @@ exports[`Table > renders with loading color error correctly 1`] = `
 `;
 
 exports[`Table > renders with loading color info correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative after:absolute after:z-[1] after:h-px after:bg-info after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative after:absolute after:z-[1] after:h-px after:bg-info after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -1184,52 +1184,52 @@ exports[`Table > renders with loading color info correctly 1`] = `
 `;
 
 exports[`Table > renders with loading color neutral correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative after:absolute after:z-[1] after:h-px after:bg-inverted after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative after:absolute after:z-[1] after:h-px after:bg-inverted after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -1239,52 +1239,52 @@ exports[`Table > renders with loading color neutral correctly 1`] = `
 `;
 
 exports[`Table > renders with loading color primary correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -1294,52 +1294,52 @@ exports[`Table > renders with loading color primary correctly 1`] = `
 `;
 
 exports[`Table > renders with loading color secondary correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative after:absolute after:z-[1] after:h-px after:bg-secondary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative after:absolute after:z-[1] after:h-px after:bg-secondary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -1349,52 +1349,52 @@ exports[`Table > renders with loading color secondary correctly 1`] = `
 `;
 
 exports[`Table > renders with loading color success correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative after:absolute after:z-[1] after:h-px after:bg-success after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative after:absolute after:z-[1] after:h-px after:bg-success after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -1404,52 +1404,52 @@ exports[`Table > renders with loading color success correctly 1`] = `
 `;
 
 exports[`Table > renders with loading color warning correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative after:absolute after:z-[1] after:h-px after:bg-warning after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative after:absolute after:z-[1] after:h-px after:bg-warning after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -1459,52 +1459,52 @@ exports[`Table > renders with loading color warning correctly 1`] = `
 `;
 
 exports[`Table > renders with loading correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -1514,64 +1514,64 @@ exports[`Table > renders with loading correctly 1`] = `
 `;
 
 exports[`Table > renders with loading slot correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+    <thead data-slot="thead" class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
-            <div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Select all</label>
               <!--v-if-->
             </div>
           </div>
         </th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Date</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Email</span>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Date</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
           </button></th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <div class="text-right">Amount</div>
         </th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
       </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
       <tr>
-        <td colspan="7" class="py-6 text-center">Loading slot</td>
+        <td colspan="7" data-slot="loading" class="py-6 text-center">Loading slot</td>
       </tr>
     </tbody>
-    <tfoot class="relative">
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+    <tfoot data-slot="tfoot" class="relative">
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <div class="text-right font-medium">Total: €0.00</div>
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
       </tr>
@@ -1581,59 +1581,59 @@ exports[`Table > renders with loading slot correctly 1`] = `
 `;
 
 exports[`Table > renders with meta field on columns correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
-            <div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Select all</label>
               <!--v-if-->
             </div>
           </div>
         </th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">#</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">Date</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Email</span>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">#</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">Date</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
           </button></th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
           <div class="text-right">Amount</div>
         </th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
           <!---->
         </th>
       </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div class="lowercase">ken99@yahoo.com</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div class="text-right font-medium">€316.00</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
-          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-2" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-2" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
               <!--v-if-->
               <!--v-if-->
             </button>
@@ -1644,27 +1644,27 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div class="lowercase">Abe45@gmail.com</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div class="text-right font-medium">€242.00</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
-          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-4" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-4" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
               <!--v-if-->
               <!--v-if-->
             </button>
@@ -1675,27 +1675,27 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div class="lowercase">Monserrat44@gmail.com</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div class="text-right font-medium">€837.00</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
-          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-6" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-6" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
               <!--v-if-->
               <!--v-if-->
             </button>
@@ -1706,27 +1706,27 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div class="lowercase">Silas22@gmail.com</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div class="text-right font-medium">€874.00</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
-          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-8" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-8" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
               <!--v-if-->
               <!--v-if-->
             </button>
@@ -1737,27 +1737,27 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div class="lowercase">carmella@hotmail.com</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div class="text-right font-medium">€721.00</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
-          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-10" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-10" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
               <!--v-if-->
               <!--v-if-->
             </button>
@@ -1769,28 +1769,28 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
-    <tfoot class="relative">
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
+    <tfoot data-slot="tfoot" class="relative">
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
           <div class="text-right font-medium">Total: €2,990.00</div>
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
           <!---->
         </th>
       </tr>
@@ -1800,52 +1800,52 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
 `;
 
 exports[`Table > renders with meta prop correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -1855,52 +1855,52 @@ exports[`Table > renders with meta prop correctly 1`] = `
 `;
 
 exports[`Table > renders with sticky correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="sticky top-0 inset-x-0 bg-default/75 z-[1] backdrop-blur">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="sticky top-0 inset-x-0 bg-default/75 z-[1] backdrop-blur">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -1910,52 +1910,52 @@ exports[`Table > renders with sticky correctly 1`] = `
 `;
 
 exports[`Table > renders with ui correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip table-auto">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip table-auto">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -1965,20 +1965,20 @@ exports[`Table > renders with ui correctly 1`] = `
 `;
 
 exports[`Table > renders with virtualize correctly 1`] = `
-"<div class="relative overflow-auto">
+"<div data-slot="root" class="relative overflow-auto">
   <div style="height: 325px;">
-    <table class="min-w-full">
-      <!--v-if-->
-      <thead class="relative">
-        <tr class="data-[selected=true]:bg-elevated/50">
-          <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-          <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-          <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-          <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+    <table data-slot="base" class="min-w-full">
+      <!--v-if-->
+      <thead data-slot="thead" class="relative">
+        <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+          <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+          <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+          <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+          <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
         </tr>
-        <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+        <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
       </thead>
-      <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary"></tbody>
+      <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary"></tbody>
       <!--v-if-->
     </table>
   </div>
@@ -1986,16 +1986,16 @@ exports[`Table > renders with virtualize correctly 1`] = `
 `;
 
 exports[`Table > renders without data correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50"></tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50"></tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
       <tr>
-        <td colspan="0" class="py-6 text-center text-sm text-muted">No data</td>
+        <td colspan="0" data-slot="empty" class="py-6 text-center text-sm text-muted">No data</td>
       </tr>
     </tbody>
     <!--v-if-->
diff --git a/test/components/__snapshots__/Table.spec.ts.snap b/test/components/__snapshots__/Table.spec.ts.snap
index f779282b2a..1a2f10ad54 100644
--- a/test/components/__snapshots__/Table.spec.ts.snap
+++ b/test/components/__snapshots__/Table.spec.ts.snap
@@ -1,52 +1,52 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Table > renders with as correctly 1`] = `
-"<section class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<section data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -56,52 +56,52 @@ exports[`Table > renders with as correctly 1`] = `
 `;
 
 exports[`Table > renders with body-bottom slot correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->Body bottom slot
     </tbody>
@@ -111,51 +111,51 @@ exports[`Table > renders with body-bottom slot correctly 1`] = `
 `;
 
 exports[`Table > renders with body-top slot correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">Body top slot<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">Body top slot<tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -165,52 +165,52 @@ exports[`Table > renders with body-top slot correctly 1`] = `
 `;
 
 exports[`Table > renders with caption correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
-    <caption class="sr-only">Table caption</caption>
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
+    <caption data-slot="caption" class="sr-only">Table caption</caption>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -220,52 +220,52 @@ exports[`Table > renders with caption correctly 1`] = `
 `;
 
 exports[`Table > renders with caption slot correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
-    <caption class="sr-only">Caption slot</caption>
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
+    <caption data-slot="caption" class="sr-only">Caption slot</caption>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -275,52 +275,52 @@ exports[`Table > renders with caption slot correctly 1`] = `
 `;
 
 exports[`Table > renders with cell slot correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ID Cell slot</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ID Cell slot</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ID Cell slot</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ID Cell slot</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ID Cell slot</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ID Cell slot</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ID Cell slot</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ID Cell slot</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ID Cell slot</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ID Cell slot</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -330,52 +330,52 @@ exports[`Table > renders with cell slot correctly 1`] = `
 `;
 
 exports[`Table > renders with class correctly 1`] = `
-"<div class="overflow-auto absolute">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="overflow-auto absolute">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -385,59 +385,59 @@ exports[`Table > renders with class correctly 1`] = `
 `;
 
 exports[`Table > renders with columns correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
-            <div class="w-full ms-2 text-sm"><label for="v-0-0-0" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0-0" data-slot="label" class="block font-medium text-default">Select all</label>
               <!--v-if-->
             </div>
           </div>
         </th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Date</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><span class="iconify i-lucide:arrow-up-down shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Email</span>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Date</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><span class="iconify i-lucide:arrow-up-down shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
           </button></th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <div class="text-right">Amount</div>
         </th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
       </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="lowercase">ken99@yahoo.com</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="text-right font-medium">€316.00</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
-          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-2" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-2" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
               <!--v-if-->
               <!--v-if-->
             </button>
@@ -448,27 +448,27 @@ exports[`Table > renders with columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="lowercase">Abe45@gmail.com</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="text-right font-medium">€242.00</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
-          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-4" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-4" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
               <!--v-if-->
               <!--v-if-->
             </button>
@@ -479,27 +479,27 @@ exports[`Table > renders with columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="lowercase">Monserrat44@gmail.com</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="text-right font-medium">€837.00</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
-          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-6" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-6" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
               <!--v-if-->
               <!--v-if-->
             </button>
@@ -510,27 +510,27 @@ exports[`Table > renders with columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="lowercase">Silas22@gmail.com</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="text-right font-medium">€874.00</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
-          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-8" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-8" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
               <!--v-if-->
               <!--v-if-->
             </button>
@@ -541,27 +541,27 @@ exports[`Table > renders with columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="lowercase">carmella@hotmail.com</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="text-right font-medium">€721.00</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
-          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-10" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-10" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
               <!--v-if-->
               <!--v-if-->
             </button>
@@ -573,28 +573,28 @@ exports[`Table > renders with columns correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
-    <tfoot class="relative">
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+    <tfoot data-slot="tfoot" class="relative">
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <div class="text-right font-medium">Total: €2,990.00</div>
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
       </tr>
@@ -604,52 +604,52 @@ exports[`Table > renders with columns correctly 1`] = `
 `;
 
 exports[`Table > renders with data correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -659,16 +659,16 @@ exports[`Table > renders with data correctly 1`] = `
 `;
 
 exports[`Table > renders with empty correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50"></tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50"></tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
       <tr>
-        <td colspan="0" class="py-6 text-center text-sm text-muted">There is no data</td>
+        <td colspan="0" data-slot="empty" class="py-6 text-center text-sm text-muted">There is no data</td>
       </tr>
     </tbody>
     <!--v-if-->
@@ -677,64 +677,64 @@ exports[`Table > renders with empty correctly 1`] = `
 `;
 
 exports[`Table > renders with empty slot correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
-            <div class="w-full ms-2 text-sm"><label for="v-0-0-0" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0-0" data-slot="label" class="block font-medium text-default">Select all</label>
               <!--v-if-->
             </div>
           </div>
         </th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Date</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><span class="iconify i-lucide:arrow-up-down shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Email</span>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Date</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><span class="iconify i-lucide:arrow-up-down shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
           </button></th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <div class="text-right">Amount</div>
         </th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
       </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
       <tr>
-        <td colspan="7" class="py-6 text-center text-sm text-muted">Empty slot</td>
+        <td colspan="7" data-slot="empty" class="py-6 text-center text-sm text-muted">Empty slot</td>
       </tr>
     </tbody>
-    <tfoot class="relative">
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+    <tfoot data-slot="tfoot" class="relative">
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <div class="text-right font-medium">Total: €0.00</div>
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
       </tr>
@@ -744,52 +744,52 @@ exports[`Table > renders with empty slot correctly 1`] = `
 `;
 
 exports[`Table > renders with expanded slot correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -799,52 +799,52 @@ exports[`Table > renders with expanded slot correctly 1`] = `
 `;
 
 exports[`Table > renders with header slot correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">ID Header slot</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">ID Header slot</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -854,52 +854,52 @@ exports[`Table > renders with header slot correctly 1`] = `
 `;
 
 exports[`Table > renders with loading animation carousel correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -909,52 +909,52 @@ exports[`Table > renders with loading animation carousel correctly 1`] = `
 `;
 
 exports[`Table > renders with loading animation carousel-inverse correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[carousel-inverse_2s_ease-in-out_infinite] rtl:after:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[carousel-inverse_2s_ease-in-out_infinite] rtl:after:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -964,52 +964,52 @@ exports[`Table > renders with loading animation carousel-inverse correctly 1`] =
 `;
 
 exports[`Table > renders with loading animation elastic correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[elastic_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[elastic_2s_ease-in-out_infinite]">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -1019,52 +1019,52 @@ exports[`Table > renders with loading animation elastic correctly 1`] = `
 `;
 
 exports[`Table > renders with loading animation swing correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[swing_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[swing_2s_ease-in-out_infinite]">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -1074,52 +1074,52 @@ exports[`Table > renders with loading animation swing correctly 1`] = `
 `;
 
 exports[`Table > renders with loading color error correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative after:absolute after:z-[1] after:h-px after:bg-error after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative after:absolute after:z-[1] after:h-px after:bg-error after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -1129,52 +1129,52 @@ exports[`Table > renders with loading color error correctly 1`] = `
 `;
 
 exports[`Table > renders with loading color info correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative after:absolute after:z-[1] after:h-px after:bg-info after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative after:absolute after:z-[1] after:h-px after:bg-info after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -1184,52 +1184,52 @@ exports[`Table > renders with loading color info correctly 1`] = `
 `;
 
 exports[`Table > renders with loading color neutral correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative after:absolute after:z-[1] after:h-px after:bg-inverted after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative after:absolute after:z-[1] after:h-px after:bg-inverted after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -1239,52 +1239,52 @@ exports[`Table > renders with loading color neutral correctly 1`] = `
 `;
 
 exports[`Table > renders with loading color primary correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -1294,52 +1294,52 @@ exports[`Table > renders with loading color primary correctly 1`] = `
 `;
 
 exports[`Table > renders with loading color secondary correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative after:absolute after:z-[1] after:h-px after:bg-secondary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative after:absolute after:z-[1] after:h-px after:bg-secondary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -1349,52 +1349,52 @@ exports[`Table > renders with loading color secondary correctly 1`] = `
 `;
 
 exports[`Table > renders with loading color success correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative after:absolute after:z-[1] after:h-px after:bg-success after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative after:absolute after:z-[1] after:h-px after:bg-success after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -1404,52 +1404,52 @@ exports[`Table > renders with loading color success correctly 1`] = `
 `;
 
 exports[`Table > renders with loading color warning correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative after:absolute after:z-[1] after:h-px after:bg-warning after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative after:absolute after:z-[1] after:h-px after:bg-warning after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -1459,52 +1459,52 @@ exports[`Table > renders with loading color warning correctly 1`] = `
 `;
 
 exports[`Table > renders with loading correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -1514,64 +1514,64 @@ exports[`Table > renders with loading correctly 1`] = `
 `;
 
 exports[`Table > renders with loading slot correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+    <thead data-slot="thead" class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
-            <div class="w-full ms-2 text-sm"><label for="v-0-0-0" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0-0" data-slot="label" class="block font-medium text-default">Select all</label>
               <!--v-if-->
             </div>
           </div>
         </th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Date</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><span class="iconify i-lucide:arrow-up-down shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Email</span>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Date</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><span class="iconify i-lucide:arrow-up-down shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
           </button></th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <div class="text-right">Amount</div>
         </th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
       </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
       <tr>
-        <td colspan="7" class="py-6 text-center">Loading slot</td>
+        <td colspan="7" data-slot="loading" class="py-6 text-center">Loading slot</td>
       </tr>
     </tbody>
-    <tfoot class="relative">
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+    <tfoot data-slot="tfoot" class="relative">
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <div class="text-right font-medium">Total: €0.00</div>
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <!---->
         </th>
       </tr>
@@ -1581,59 +1581,59 @@ exports[`Table > renders with loading slot correctly 1`] = `
 `;
 
 exports[`Table > renders with meta field on columns correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
-            <div class="w-full ms-2 text-sm"><label for="v-0-0-0" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0-0" data-slot="label" class="block font-medium text-default">Select all</label>
               <!--v-if-->
             </div>
           </div>
         </th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">#</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">Date</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><span class="iconify i-lucide:arrow-up-down shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Email</span>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">#</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">Date</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><span class="iconify i-lucide:arrow-up-down shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Email</span>
             <!--v-if-->
           </button></th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
           <div class="text-right">Amount</div>
         </th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
           <!---->
         </th>
       </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div class="lowercase">ken99@yahoo.com</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div class="text-right font-medium">€316.00</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
-          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-2" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-2" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
               <!--v-if-->
               <!--v-if-->
             </button>
@@ -1644,27 +1644,27 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div class="lowercase">Abe45@gmail.com</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div class="text-right font-medium">€242.00</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
-          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-4" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-4" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
               <!--v-if-->
               <!--v-if-->
             </button>
@@ -1675,27 +1675,27 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div class="lowercase">Monserrat44@gmail.com</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div class="text-right font-medium">€837.00</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
-          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-6" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-6" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
               <!--v-if-->
               <!--v-if-->
             </button>
@@ -1706,27 +1706,27 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div class="lowercase">Silas22@gmail.com</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div class="text-right font-medium">€874.00</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
-          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-8" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-8" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
               <!--v-if-->
               <!--v-if-->
             </button>
@@ -1737,27 +1737,27 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
-          <div class="relative flex items-start flex-row">
-            <div class="flex items-center h-5"><button aria-label="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+          <div data-slot="root" class="relative flex items-start flex-row">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!--v-if-->
               </button></div>
             <!--v-if-->
           </div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span data-slot="base" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div class="lowercase">carmella@hotmail.com</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div class="text-right font-medium">€721.00</div>
         </td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
-          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-10" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
+          <div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-10" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Actions" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
               <!--v-if-->
               <!--v-if-->
             </button>
@@ -1769,28 +1769,28 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
-    <tfoot class="relative">
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
+    <tfoot data-slot="tfoot" class="relative">
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
           <!---->
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
           <div class="text-right font-medium">Total: €2,990.00</div>
         </th>
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
+        <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
           <!---->
         </th>
       </tr>
@@ -1800,52 +1800,52 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
 `;
 
 exports[`Table > renders with meta prop correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -1855,52 +1855,52 @@ exports[`Table > renders with meta prop correctly 1`] = `
 `;
 
 exports[`Table > renders with sticky correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="sticky top-0 inset-x-0 bg-default/75 z-[1] backdrop-blur">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="sticky top-0 inset-x-0 bg-default/75 z-[1] backdrop-blur">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -1910,52 +1910,52 @@ exports[`Table > renders with sticky correctly 1`] = `
 `;
 
 exports[`Table > renders with ui correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip table-auto">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip table-auto">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
-      </tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+      </tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">m5gr84i9</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">316</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">3u1reuv4</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">242</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">derv1ws0</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">837</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">processing</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">5kma53ae</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">874</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">success</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
+      <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">bhqecj4p</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">721</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -1965,20 +1965,20 @@ exports[`Table > renders with ui correctly 1`] = `
 `;
 
 exports[`Table > renders with virtualize correctly 1`] = `
-"<div class="relative overflow-auto">
+"<div data-slot="root" class="relative overflow-auto">
   <div style="height: 325px;">
-    <table class="min-w-full">
-      <!--v-if-->
-      <thead class="relative">
-        <tr class="data-[selected=true]:bg-elevated/50">
-          <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
-          <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
-          <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
-          <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+    <table data-slot="base" class="min-w-full">
+      <!--v-if-->
+      <thead data-slot="thead" class="relative">
+        <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
+          <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+          <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+          <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+          <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
         </tr>
-        <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+        <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
       </thead>
-      <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary"></tbody>
+      <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary"></tbody>
       <!--v-if-->
     </table>
   </div>
@@ -1986,16 +1986,16 @@ exports[`Table > renders with virtualize correctly 1`] = `
 `;
 
 exports[`Table > renders without data correctly 1`] = `
-"<div class="relative overflow-auto">
-  <table class="min-w-full overflow-clip">
+"<div data-slot="root" class="relative overflow-auto">
+  <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead class="relative">
-      <tr class="data-[selected=true]:bg-elevated/50"></tr>
-      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    <thead data-slot="thead" class="relative">
+      <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50"></tr>
+      <tr data-slot="separator" class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
     </thead>
-    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+    <tbody data-slot="tbody" class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
       <tr>
-        <td colspan="0" class="py-6 text-center text-sm text-muted">No data</td>
+        <td colspan="0" data-slot="empty" class="py-6 text-center text-sm text-muted">No data</td>
       </tr>
     </tbody>
     <!--v-if-->
diff --git a/test/components/__snapshots__/Tabs-vue.spec.ts.snap b/test/components/__snapshots__/Tabs-vue.spec.ts.snap
index 301b071730..eb4fff9ae0 100644
--- a/test/components/__snapshots__/Tabs-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Tabs-vue.spec.ts.snap
@@ -1,487 +1,487 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Tabs > renders with as correctly 1`] = `
-"<section dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<section dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </section>"
 `;
 
 exports[`Tabs > renders with class correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col w-96">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col w-96">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with content slot correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">Content slot</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-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="focus:outline-none w-full">Content slot</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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with custom slot correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with default slot correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Default slot</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Default slot</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Default slot</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Default slot</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Default slot</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Default slot</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with defaultValue correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-0" data-state="inactive"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-0" data-state="inactive"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-1" data-state="active"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-1" data-state="active"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">And, this is the content for Tab2</div>
-  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="focus:outline-none w-full">And, this is the content for Tab2</div>
+  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with items correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with labelKey correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">i-lucide-user</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">i-lucide-user</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">i-lucide-bell</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">i-lucide-bell</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with leading slot correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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">Leading slot<span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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">Leading slot<span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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">Leading slot<span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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">Leading slot<span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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">Leading slot<span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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">Leading slot<span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with modelValue correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-0" data-state="inactive"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-0" data-state="inactive"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-1" data-state="active"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-1" data-state="active"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">And, this is the content for Tab2</div>
-  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="focus:outline-none w-full">And, this is the content for Tab2</div>
+  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with neutral variant link correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group border-default w-full border-b -mb-px" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <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 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="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group border-default w-full border-b -mb-px" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" 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 data-slot="trigger" 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="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with neutral variant pill correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-inverted"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-inverted"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with orientation vertical correctly 1`] = `
-"<div dir="ltr" data-orientation="vertical" class="flex items-center gap-2">
-  <div class="relative flex p-1 group bg-elevated rounded-lg flex-col items-center" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="vertical">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs top-0 h-(--reka-tabs-indicator-size) translate-y-(--reka-tabs-indicator-position) inset-x-1 bg-primary"></div><button 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 grow px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="vertical" data-slot="root" class="flex items-center gap-2">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg flex-col items-center" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="vertical">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs top-0 h-(--reka-tabs-indicator-size) translate-y-(--reka-tabs-indicator-position) inset-x-1 bg-primary"></div><button data-slot="trigger" 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 grow px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="vertical" 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="vertical" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="vertical" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" 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="vertical" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="vertical" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="vertical" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with primary variant link correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group border-default w-full border-b -mb-px" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <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 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="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group border-default w-full border-b -mb-px" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" 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 data-slot="trigger" 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="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with primary variant pill correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with size lg correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with size md correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with size sm correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="16" height="16" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with size xl correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-6 text-xs shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-6 text-xs shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="24" height="24" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-6"></svg><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-6"></svg><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with size xs correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="16" height="16" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with trailing slot correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>Trailing slot</button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab2</span>Trailing slot</button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab3</span>Trailing slot</button>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>Trailing slot</button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>Trailing slot</button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span>Trailing slot</button>
   </div>
-  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with ui correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full ring ring-default">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 ring ring-default">
+  <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;" data-slot="content" class="focus:outline-none w-full ring ring-default">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" data-slot="content" class="focus:outline-none w-full ring ring-default">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full ring ring-default">
+  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full ring ring-default">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with unmountOnHide correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">And, this is the content for Tab2</div>
-  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">Finally, this is the content for Tab3</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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">And, this is the content for Tab2</div>
+  <div id="reka-tabs-v-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">Finally, this is the content for Tab3</div>
 </div>"
 `;
 
 exports[`Tabs > renders without content correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
diff --git a/test/components/__snapshots__/Tabs.spec.ts.snap b/test/components/__snapshots__/Tabs.spec.ts.snap
index 9d9d25bcc9..72b26ce727 100644
--- a/test/components/__snapshots__/Tabs.spec.ts.snap
+++ b/test/components/__snapshots__/Tabs.spec.ts.snap
@@ -1,487 +1,487 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Tabs > renders with as correctly 1`] = `
-"<section dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<section dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </section>"
 `;
 
 exports[`Tabs > renders with class correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col w-96">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col w-96">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with content slot correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">Content slot</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-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;" data-slot="content" class="focus:outline-none w-full">Content slot</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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with custom slot correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with default slot correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Default slot</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Default slot</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Default slot</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Default slot</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Default slot</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Default slot</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with defaultValue correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="inactive"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="inactive"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="active"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="active"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">And, this is the content for Tab2</div>
-  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="focus:outline-none w-full">And, this is the content for Tab2</div>
+  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with items correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with labelKey correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">i-lucide-user</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">i-lucide-user</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">i-lucide-bell</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">i-lucide-bell</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with leading slot correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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">Leading slot<span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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">Leading slot<span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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">Leading slot<span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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">Leading slot<span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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">Leading slot<span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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">Leading slot<span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with modelValue correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="inactive"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="inactive"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="active"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="active"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">And, this is the content for Tab2</div>
-  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="focus:outline-none w-full">And, this is the content for Tab2</div>
+  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with neutral variant link correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group border-default w-full border-b -mb-px" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <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 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="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group border-default w-full border-b -mb-px" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" 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 data-slot="trigger" 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="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with neutral variant pill correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-inverted"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-inverted"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with orientation vertical correctly 1`] = `
-"<div dir="ltr" data-orientation="vertical" class="flex items-center gap-2">
-  <div class="relative flex p-1 group bg-elevated rounded-lg flex-col items-center" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="vertical">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs top-0 h-(--reka-tabs-indicator-size) translate-y-(--reka-tabs-indicator-position) inset-x-1 bg-primary"></div><button 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 grow px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="vertical" data-slot="root" class="flex items-center gap-2">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg flex-col items-center" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="vertical">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs top-0 h-(--reka-tabs-indicator-size) translate-y-(--reka-tabs-indicator-position) inset-x-1 bg-primary"></div><button data-slot="trigger" 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 grow px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="vertical" 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="vertical" 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-0" role="tabpanel" data-state="active" data-orientation="vertical" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" 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="vertical" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="vertical" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="vertical" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with primary variant link correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group border-default w-full border-b -mb-px" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <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 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="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group border-default w-full border-b -mb-px" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" 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 data-slot="trigger" 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="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with primary variant pill correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with size lg correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-2 text-sm gap-2 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with size md correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with size sm correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="16" height="16" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-4" aria-hidden="true"></span><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-4" aria-hidden="true"></span><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-2.5 py-1.5 text-xs gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with size xl correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-6 text-xs shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-6 text-xs shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="24" height="24" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-6" aria-hidden="true"></span><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-6" aria-hidden="true"></span><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-2 text-base gap-2 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with size xs correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="16" height="16" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-4" aria-hidden="true"></span><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-4" aria-hidden="true"></span><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-2 py-1 text-xs gap-1 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with trailing slot correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>Trailing slot</button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span>Trailing slot</button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span>Trailing slot</button>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>Trailing slot</button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>Trailing slot</button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span>Trailing slot</button>
   </div>
-  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">
+  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with ui correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full ring ring-default">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 ring ring-default">
+  <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;" data-slot="content" class="focus:outline-none w-full ring ring-default">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" data-slot="content" class="focus:outline-none w-full ring ring-default">
     <!--v-if-->
   </div>
-  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full ring ring-default">
+  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full ring ring-default">
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`Tabs > renders with unmountOnHide correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
-  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
-  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">And, this is the content for Tab2</div>
-  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">Finally, this is the content for Tab3</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;" data-slot="content" 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" data-slot="content" class="focus:outline-none w-full">And, this is the content for Tab2</div>
+  <div id="reka-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">Finally, this is the content for Tab3</div>
 </div>"
 `;
 
 exports[`Tabs > renders without content correctly 1`] = `
-"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
-  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span>
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" data-slot="indicator" class="absolute transition-[translate,width] duration-200 rounded-md shadow-xs left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) inset-y-1 bg-primary"></div><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" 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"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="Benjamín Canac" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="truncate">Tab1</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab2</span>
       <!--v-if-->
-    </button><button 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">badge</span>
+    </button><button data-slot="trigger" 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 grow justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" 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"><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Tab3</span><span data-slot="trailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">badge</span>
       <!--v-if--></span>
     </button>
   </div>
diff --git a/test/components/__snapshots__/Textarea-vue.spec.ts.snap b/test/components/__snapshots__/Textarea-vue.spec.ts.snap
index 5667088905..0a613a819c 100644
--- a/test/components/__snapshots__/Textarea-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Textarea-vue.spec.ts.snap
@@ -1,271 +1,271 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Textarea > renders with ariaLabel correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" aria-label="Aria label"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" aria-label="Aria label"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with as correctly 1`] = `
-"<section class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<section data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </section>"
 `;
 
 exports[`Textarea > renders with autoresize correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented resize-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented resize-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with avatar and leadingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span data-slot="leading" class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
   <!--v-if-->
 </div>"
 `;
 
-exports[`Textarea > renders with avatar and trailingIcon correctly 1`] = `"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="absolute end-0 flex items-start pe-2.5 inset-y-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></div>"`;
+exports[`Textarea > renders with avatar and trailingIcon correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"></textarea><span data-slot="leading" class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span><span data-slot="trailing" class="absolute end-0 flex items-start pe-2.5 inset-y-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span></div>"`;
 
 exports[`Textarea > renders with avatar correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span data-slot="leading" class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with class correctly 1`] = `
-"<div class="relative inline-flex items-center w-48"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center w-48"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with default slot correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>Default slot
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>Default slot
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with disabled correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" disabled=""></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" disabled=""></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with icon correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span data-slot="leading" class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with id correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea id="id" rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea id="id" rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with leading and icon correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span data-slot="leading" class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with leading slot correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5">Leading slot</span>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span data-slot="leading" class="absolute start-0 flex items-start ps-2.5 inset-y-1.5">Leading slot</span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with leadingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span data-slot="leading" class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with loading and avatar correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span data-slot="leading" class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with loading correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span data-slot="leading" class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
   <!--v-if-->
 </div>"
 `;
 
-exports[`Textarea > renders with loading trailing and avatar correctly 1`] = `"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="absolute end-0 flex items-start pe-2.5 inset-y-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></div>"`;
+exports[`Textarea > renders with loading trailing and avatar correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"></textarea><span data-slot="leading" class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span><span data-slot="trailing" class="absolute end-0 flex items-start pe-2.5 inset-y-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span></div>"`;
 
 exports[`Textarea > renders with loading trailing correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9"></textarea>
-  <!--v-if--><span class="absolute end-0 flex items-start pe-2.5 inset-y-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9"></textarea>
+  <!--v-if--><span data-slot="trailing" class="absolute end-0 flex items-start pe-2.5 inset-y-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
 </div>"
 `;
 
 exports[`Textarea > renders with loadingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span data-slot="leading" class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with name correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea name="name" rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea name="name" rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with neutral variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with neutral variant none correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with neutral variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with neutral variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with neutral variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with placeholder correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" placeholder="Search..." class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" placeholder="Search..." data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with primary variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with primary variant none correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with primary variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with primary variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with primary variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with required correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" required=""></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" required=""></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with rows correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="5" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="5" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with size lg correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with size md correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with size sm correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with size xl correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with size xs correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with trailing and icon correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9"></textarea>
-  <!--v-if--><span class="absolute end-0 flex items-start pe-2.5 inset-y-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9"></textarea>
+  <!--v-if--><span data-slot="trailing" class="absolute end-0 flex items-start pe-2.5 inset-y-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </div>"
 `;
 
 exports[`Textarea > renders with trailing slot correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9"></textarea>
-  <!--v-if--><span class="absolute end-0 flex items-start pe-2.5 inset-y-1.5">Trailing slot</span>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9"></textarea>
+  <!--v-if--><span data-slot="trailing" class="absolute end-0 flex items-start pe-2.5 inset-y-1.5">Trailing slot</span>
 </div>"
 `;
 
 exports[`Textarea > renders with trailingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9"></textarea>
-  <!--v-if--><span class="absolute end-0 flex items-start pe-2.5 inset-y-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9"></textarea>
+  <!--v-if--><span data-slot="trailing" class="absolute end-0 flex items-start pe-2.5 inset-y-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
 </div>"
 `;
 
 exports[`Textarea > renders with ui correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
diff --git a/test/components/__snapshots__/Textarea.spec.ts.snap b/test/components/__snapshots__/Textarea.spec.ts.snap
index c901445c40..26fefa4eb1 100644
--- a/test/components/__snapshots__/Textarea.spec.ts.snap
+++ b/test/components/__snapshots__/Textarea.spec.ts.snap
@@ -1,271 +1,271 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Textarea > renders with ariaLabel correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" aria-label="Aria label"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" aria-label="Aria label"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with as correctly 1`] = `
-"<section class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<section data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </section>"
 `;
 
 exports[`Textarea > renders with autoresize correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented resize-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented resize-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with avatar and leadingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span data-slot="leading" class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
   <!--v-if-->
 </div>"
 `;
 
-exports[`Textarea > renders with avatar and trailingIcon correctly 1`] = `"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="absolute end-0 flex items-start pe-2.5 inset-y-1.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></div>"`;
+exports[`Textarea > renders with avatar and trailingIcon correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"></textarea><span data-slot="leading" class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span><span data-slot="trailing" class="absolute end-0 flex items-start pe-2.5 inset-y-1.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span></div>"`;
 
 exports[`Textarea > renders with avatar correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span data-slot="leading" class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with class correctly 1`] = `
-"<div class="relative inline-flex items-center w-48"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center w-48"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with default slot correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>Default slot
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>Default slot
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with disabled correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" disabled=""></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" disabled=""></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with icon correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span data-slot="leading" class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with id correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea id="id" rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea id="id" rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with leading and icon correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span data-slot="leading" class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with leading slot correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5">Leading slot</span>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span data-slot="leading" class="absolute start-0 flex items-start ps-2.5 inset-y-1.5">Leading slot</span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with leadingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span data-slot="leading" class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with loading and avatar correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span data-slot="leading" class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with loading correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span data-slot="leading" class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span>
   <!--v-if-->
 </div>"
 `;
 
-exports[`Textarea > renders with loading trailing and avatar correctly 1`] = `"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span></span><span class="absolute end-0 flex items-start pe-2.5 inset-y-1.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></div>"`;
+exports[`Textarea > renders with loading trailing and avatar correctly 1`] = `"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9"></textarea><span data-slot="leading" class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></span><span data-slot="trailing" class="absolute end-0 flex items-start pe-2.5 inset-y-1.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span></div>"`;
 
 exports[`Textarea > renders with loading trailing correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9"></textarea>
-  <!--v-if--><span class="absolute end-0 flex items-start pe-2.5 inset-y-1.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9"></textarea>
+  <!--v-if--><span data-slot="trailing" class="absolute end-0 flex items-start pe-2.5 inset-y-1.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </div>"
 `;
 
 exports[`Textarea > renders with loadingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span class="iconify i-lucide:loader shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9"></textarea><span data-slot="leading" class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span class="iconify i-lucide:loader shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with name correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea name="name" rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea name="name" rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with neutral variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with neutral variant none correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with neutral variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with neutral variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with neutral variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with placeholder correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" placeholder="Search..." class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" placeholder="Search..." data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with primary variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with primary variant none correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with primary variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with primary variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with primary variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with required correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" required=""></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" required=""></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with rows correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="5" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="5" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with size lg correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with size md correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with size sm correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with size xl correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with size xs correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Textarea > renders with trailing and icon correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9"></textarea>
-  <!--v-if--><span class="absolute end-0 flex items-start pe-2.5 inset-y-1.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9"></textarea>
+  <!--v-if--><span data-slot="trailing" class="absolute end-0 flex items-start pe-2.5 inset-y-1.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </div>"
 `;
 
 exports[`Textarea > renders with trailing slot correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9"></textarea>
-  <!--v-if--><span class="absolute end-0 flex items-start pe-2.5 inset-y-1.5">Trailing slot</span>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9"></textarea>
+  <!--v-if--><span data-slot="trailing" class="absolute end-0 flex items-start pe-2.5 inset-y-1.5">Trailing slot</span>
 </div>"
 `;
 
 exports[`Textarea > renders with trailingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9"></textarea>
-  <!--v-if--><span class="absolute end-0 flex items-start pe-2.5 inset-y-1.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9"></textarea>
+  <!--v-if--><span data-slot="trailing" class="absolute end-0 flex items-start pe-2.5 inset-y-1.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></span>
 </div>"
 `;
 
 exports[`Textarea > renders with ui correctly 1`] = `
-"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+"<div data-slot="root" class="relative inline-flex items-center"><textarea rows="3" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
   <!--v-if-->
   <!--v-if-->
 </div>"
diff --git a/test/components/__snapshots__/Timeline-vue.spec.ts.snap b/test/components/__snapshots__/Timeline-vue.spec.ts.snap
index dc4c6ae4a5..7a267d5980 100644
--- a/test/components/__snapshots__/Timeline-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Timeline-vue.spec.ts.snap
@@ -1,1440 +1,1440 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Timeline > renders with as correctly 1`] = `
-"<section data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<section data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </section>"
 `;
 
 exports[`Timeline > renders with class correctly 1`] = `
-"<div data-orientation="vertical" class="flex flex-col gap-8">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex flex-col gap-8">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with date slot correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Date slot</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Date slot</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Date slot</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Date slot</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Date slot</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Date slot</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Date slot</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Date slot</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with defaultValue correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3" data-state="completed">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3" data-state="completed">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3" data-state="active">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3" data-state="active">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with description slot correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Description slot</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Description slot</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">Description slot</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Description slot</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Description slot</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Description slot</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">Description slot</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Description slot</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with indicator slot correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary">Indicator slot</span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary">Indicator slot</span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary">Indicator slot</span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary">Indicator slot</span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary">Indicator slot</span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary">Indicator slot</span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary">Indicator slot</span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary">Indicator slot</span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with items correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with modelValue correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3" data-state="completed">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3" data-state="completed">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3" data-state="active">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3" data-state="active">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with neutral color correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-inverted"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-inverted"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-inverted"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-inverted"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-inverted"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-inverted"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with reverse and defaultValue correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3" data-state="active">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3" data-state="active">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3" data-state="completed">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3" data-state="completed">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3" data-state="completed">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3" data-state="completed">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with reverse and modelValue correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3" data-state="active">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3" data-state="active">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3" data-state="completed">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3" data-state="completed">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3" data-state="completed">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3" data-state="completed">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with reverse correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size 2xl horizontal correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-3 pb-8">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-3 pb-8">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-3 pb-8">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-3 pb-8">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-3 pb-8">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-3 pb-8">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-3 pb-8">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-3 pb-8">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size 2xl vertical correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-3 pb-8">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-3 pb-8">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-3 pb-8">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-3 pb-8">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-3 pb-8">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-3 pb-8">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-3 pb-8">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-3 pb-8">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size 2xs horizontal correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full pb-5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full pb-5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full pb-5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full pb-5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full pb-5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full pb-5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full pb-5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full pb-5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size 2xs vertical correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full pb-5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full pb-5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full pb-5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full pb-5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full pb-5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full pb-5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full pb-5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full pb-5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size 3xl horizontal correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-3.5 pb-8.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-3.5 pb-8.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-3.5 pb-8.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-3.5 pb-8.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-3.5 pb-8.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-3.5 pb-8.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-3.5 pb-8.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-3.5 pb-8.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size 3xl vertical correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-3.5 pb-8.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-3.5 pb-8.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-3.5 pb-8.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-3.5 pb-8.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-3.5 pb-8.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-3.5 pb-8.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-3.5 pb-8.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-3.5 pb-8.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size 3xs horizontal correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full -mt-0.5 pb-4.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full -mt-0.5 pb-4.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full -mt-0.5 pb-4.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full -mt-0.5 pb-4.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full -mt-0.5 pb-4.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full -mt-0.5 pb-4.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full -mt-0.5 pb-4.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full -mt-0.5 pb-4.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size 3xs vertical correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full -mt-0.5 pb-4.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full -mt-0.5 pb-4.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full -mt-0.5 pb-4.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full -mt-0.5 pb-4.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full -mt-0.5 pb-4.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full -mt-0.5 pb-4.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full -mt-0.5 pb-4.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full -mt-0.5 pb-4.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size lg horizontal correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-2 pb-7">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-2 pb-7">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-2 pb-7">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-2 pb-7">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-2 pb-7">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-2 pb-7">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-2 pb-7">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-2 pb-7">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size lg vertical correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-2 pb-7">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-2 pb-7">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-2 pb-7">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-2 pb-7">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-2 pb-7">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-2 pb-7">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-2 pb-7">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-2 pb-7">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size md horizontal correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size md vertical correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size sm horizontal correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1 pb-6">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1 pb-6">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1 pb-6">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1 pb-6">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1 pb-6">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1 pb-6">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1 pb-6">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1 pb-6">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size sm vertical correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1 pb-6">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1 pb-6">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1 pb-6">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1 pb-6">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1 pb-6">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1 pb-6">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1 pb-6">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1 pb-6">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size xl horizontal correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-2.5 pb-7.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-2.5 pb-7.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-2.5 pb-7.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-2.5 pb-7.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-2.5 pb-7.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-2.5 pb-7.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-2.5 pb-7.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-2.5 pb-7.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size xl vertical correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-2.5 pb-7.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-2.5 pb-7.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-2.5 pb-7.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-2.5 pb-7.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-2.5 pb-7.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-2.5 pb-7.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-2.5 pb-7.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-2.5 pb-7.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size xs horizontal correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-0.5 pb-5.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-0.5 pb-5.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-0.5 pb-5.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-0.5 pb-5.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-0.5 pb-5.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-0.5 pb-5.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-0.5 pb-5.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-0.5 pb-5.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size xs vertical correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-0.5 pb-5.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-0.5 pb-5.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-0.5 pb-5.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-0.5 pb-5.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-0.5 pb-5.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-0.5 pb-5.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-0.5 pb-5.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-0.5 pb-5.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with title slot correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Title slot</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Title slot</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Title slot</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Title slot</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Title slot</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Title slot</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Title slot</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Title slot</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with ui correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="text-highlighted text-sm font-bold">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="text-highlighted text-sm font-bold">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="text-highlighted text-sm font-bold">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="text-highlighted text-sm font-bold">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="text-highlighted text-sm font-bold">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="text-highlighted text-sm font-bold">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-inherit"></svg></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-inherit"></svg></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="text-highlighted text-sm font-bold">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="text-highlighted text-sm font-bold">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
diff --git a/test/components/__snapshots__/Timeline.spec.ts.snap b/test/components/__snapshots__/Timeline.spec.ts.snap
index 1f64421015..6227ff0d64 100644
--- a/test/components/__snapshots__/Timeline.spec.ts.snap
+++ b/test/components/__snapshots__/Timeline.spec.ts.snap
@@ -1,1440 +1,1440 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Timeline > renders with as correctly 1`] = `
-"<section data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<section data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </section>"
 `;
 
 exports[`Timeline > renders with class correctly 1`] = `
-"<div data-orientation="vertical" class="flex flex-col gap-8">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex flex-col gap-8">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with date slot correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Date slot</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Date slot</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Date slot</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Date slot</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Date slot</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Date slot</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Date slot</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Date slot</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with defaultValue correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3" data-state="completed">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3" data-state="completed">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3" data-state="active">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3" data-state="active">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with description slot correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Description slot</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Description slot</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">Description slot</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Description slot</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Description slot</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Description slot</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">Description slot</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Description slot</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with indicator slot correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary">Indicator slot</span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary">Indicator slot</span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary">Indicator slot</span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary">Indicator slot</span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary">Indicator slot</span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary">Indicator slot</span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary">Indicator slot</span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary">Indicator slot</span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with items correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with modelValue correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3" data-state="completed">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3" data-state="completed">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3" data-state="active">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3" data-state="active">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with neutral color correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-inverted"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-inverted"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-inverted"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-inverted"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-inverted"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-inverted"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with reverse and defaultValue correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3" data-state="active">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3" data-state="active">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3" data-state="completed">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3" data-state="completed">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3" data-state="completed">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3" data-state="completed">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with reverse and modelValue correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3" data-state="active">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3" data-state="active">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3" data-state="completed">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3" data-state="completed">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3" data-state="completed">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3" data-state="completed">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with reverse correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size 2xl horizontal correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-3 pb-8">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-3 pb-8">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-3 pb-8">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-3 pb-8">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-3 pb-8">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-3 pb-8">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-3 pb-8">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-3 pb-8">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size 2xl vertical correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-3 pb-8">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-3 pb-8">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-3 pb-8">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-3 pb-8">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-3 pb-8">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-3 pb-8">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-11 text-[22px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-3 pb-8">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-3 pb-8">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size 2xs horizontal correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full pb-5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full pb-5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full pb-5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full pb-5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full pb-5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full pb-5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full pb-5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full pb-5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size 2xs vertical correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full pb-5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full pb-5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full pb-5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full pb-5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full pb-5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full pb-5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-5 text-[10px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full pb-5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full pb-5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size 3xl horizontal correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-3.5 pb-8.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-3.5 pb-8.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-3.5 pb-8.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-3.5 pb-8.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-3.5 pb-8.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-3.5 pb-8.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-3.5 pb-8.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-3.5 pb-8.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size 3xl vertical correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-3.5 pb-8.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-3.5 pb-8.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-3.5 pb-8.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-3.5 pb-8.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-3.5 pb-8.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-3.5 pb-8.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-12 text-2xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-3.5 pb-8.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-3.5 pb-8.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size 3xs horizontal correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full -mt-0.5 pb-4.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full -mt-0.5 pb-4.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full -mt-0.5 pb-4.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full -mt-0.5 pb-4.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full -mt-0.5 pb-4.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full -mt-0.5 pb-4.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full -mt-0.5 pb-4.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full -mt-0.5 pb-4.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size 3xs vertical correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full -mt-0.5 pb-4.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full -mt-0.5 pb-4.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full -mt-0.5 pb-4.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full -mt-0.5 pb-4.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full -mt-0.5 pb-4.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full -mt-0.5 pb-4.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-4 text-[8px] group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full -mt-0.5 pb-4.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full -mt-0.5 pb-4.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size lg horizontal correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-2 pb-7">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-2 pb-7">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-2 pb-7">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-2 pb-7">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-2 pb-7">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-2 pb-7">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-2 pb-7">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-2 pb-7">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size lg vertical correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-2 pb-7">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-2 pb-7">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-2 pb-7">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-2 pb-7">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-2 pb-7">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-2 pb-7">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-9 text-lg group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-2 pb-7">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-2 pb-7">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size md horizontal correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size md vertical correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size sm horizontal correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1 pb-6">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1 pb-6">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1 pb-6">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1 pb-6">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1 pb-6">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1 pb-6">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1 pb-6">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1 pb-6">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size sm vertical correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1 pb-6">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1 pb-6">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1 pb-6">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1 pb-6">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1 pb-6">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1 pb-6">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-7 text-sm group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1 pb-6">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1 pb-6">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size xl horizontal correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-2.5 pb-7.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-2.5 pb-7.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-2.5 pb-7.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-2.5 pb-7.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-2.5 pb-7.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-2.5 pb-7.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-2.5 pb-7.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-2.5 pb-7.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size xl vertical correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-2.5 pb-7.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-2.5 pb-7.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-2.5 pb-7.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-2.5 pb-7.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-2.5 pb-7.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-2.5 pb-7.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-10 text-xl group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-2.5 pb-7.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-2.5 pb-7.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size xs horizontal correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-0.5 pb-5.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-0.5 pb-5.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-0.5 pb-5.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-0.5 pb-5.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-0.5 pb-5.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-0.5 pb-5.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-0.5 pb-5.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-0.5 pb-5.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with size xs vertical correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-0.5 pb-5.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-0.5 pb-5.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-0.5 pb-5.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-0.5 pb-5.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-0.5 pb-5.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-0.5 pb-5.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-6 text-xs group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-0.5 pb-5.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-0.5 pb-5.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with title slot correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Title slot</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Title slot</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Title slot</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Title slot</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Title slot</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Title slot</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="font-medium text-highlighted text-sm">Title slot</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="font-medium text-highlighted text-sm">Title slot</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`Timeline > renders with ui correctly 1`] = `
-"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 15, 2025</div>
-      <div class="text-highlighted text-sm font-bold">Project Kickoff</div>
-      <div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 15, 2025</div>
+      <div data-slot="title" class="text-highlighted text-sm font-bold">Project Kickoff</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 22, 2025</div>
-      <div class="text-highlighted text-sm font-bold">Design Phase</div>
-      <div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 22, 2025</div>
+      <div data-slot="title" class="text-highlighted text-sm font-bold">Design Phase</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
-      <div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Mar 29, 2025</div>
-      <div class="text-highlighted text-sm font-bold">Development Sprint</div>
-      <div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Mar 29, 2025</div>
+      <div data-slot="title" class="text-highlighted text-sm font-bold">Development Sprint</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
     </div>
   </div>
-  <div class="group relative flex flex-1 gap-3">
-    <div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
     </div>
-    <div class="w-full mt-1.5 pb-6.5">
-      <div class="text-dimmed text-xs/5">Apr 5, 2025</div>
-      <div class="text-highlighted text-sm font-bold">Testing &amp; Deployment</div>
-      <div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-dimmed text-xs/5">Apr 5, 2025</div>
+      <div data-slot="title" class="text-highlighted text-sm font-bold">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
     </div>
   </div>
 </div>"
diff --git a/test/components/__snapshots__/Toast-vue.spec.ts.snap b/test/components/__snapshots__/Toast-vue.spec.ts.snap
index b220a1ee9e..91fd5bf04c 100644
--- a/test/components/__snapshots__/Toast-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Toast-vue.spec.ts.snap
@@ -8,27 +8,27 @@ exports[`Toast > renders with actions correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
       <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
         <!--v-if-->
-        <div class="flex gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-            <!--v-if--><span class="truncate">Action</span>
+        <div data-slot="actions" class="flex gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Action</span>
             <!--v-if-->
           </button></div>
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -48,24 +48,24 @@ exports[`Toast > renders with as correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <section data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <section data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
       <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -85,23 +85,23 @@ exports[`Toast > renders with avatar correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-11 text-[22px] shrink-0"><img src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-11 text-[22px] shrink-0"><img src="https://github.com/benjamincanac.png" width="44" height="44" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -121,24 +121,24 @@ exports[`Toast > renders with class correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start bg-elevated/50" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start bg-elevated/50" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
       <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -158,21 +158,21 @@ exports[`Toast > renders with close slot correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
       <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
         <!--v-if-->Close slot
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -192,24 +192,24 @@ exports[`Toast > renders with closeIcon correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
       <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -229,24 +229,24 @@ exports[`Toast > renders with color neutral correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
       <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-inverted data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-inverted data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -266,24 +266,24 @@ exports[`Toast > renders with description correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
       <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
-        <div class="text-sm text-muted mt-1">This is a toast</div>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
+        <div data-slot="description" class="text-sm text-muted mt-1">This is a toast</div>
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -303,24 +303,24 @@ exports[`Toast > renders with description slot correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
       <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
-        <div class="text-sm text-muted mt-1">Description slot</div>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
+        <div data-slot="description" class="text-sm text-muted mt-1">Description slot</div>
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -340,23 +340,23 @@ exports[`Toast > renders with icon correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary"></svg>
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5 text-primary"></svg>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -376,22 +376,22 @@ exports[`Toast > renders with leading slot correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">Leading slot<div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">Leading slot<div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -411,24 +411,24 @@ exports[`Toast > renders with orientation horizontal correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="horizontal" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary"></svg>
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
-        <div class="text-sm text-muted mt-1">This is a toast</div>
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="horizontal" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5 text-primary"></svg>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
+        <div data-slot="description" class="text-sm text-muted mt-1">This is a toast</div>
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span class="truncate">Action</span>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Action</span>
           <!--v-if-->
-        </button><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+        </button><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
         </button></div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -448,26 +448,26 @@ exports[`Toast > renders with orientation vertical correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary"></svg>
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
-        <div class="text-sm text-muted mt-1">This is a toast</div>
-        <div class="flex gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-            <!--v-if--><span class="truncate">Action</span>
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5 text-primary"></svg>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
+        <div data-slot="description" class="text-sm text-muted mt-1">This is a toast</div>
+        <div data-slot="actions" class="flex gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Action</span>
             <!--v-if-->
           </button></div>
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -487,24 +487,24 @@ exports[`Toast > renders with title correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
       <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -524,24 +524,24 @@ exports[`Toast > renders with title slot correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
       <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Title slot</div>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Title slot</div>
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -561,24 +561,24 @@ exports[`Toast > renders with type correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
       <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -598,24 +598,24 @@ exports[`Toast > renders with ui correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
       <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm text-highlighted font-bold">Toast</div>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm text-highlighted font-bold">Toast</div>
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -635,19 +635,19 @@ exports[`Toast > renders without close correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
       <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
diff --git a/test/components/__snapshots__/Toast.spec.ts.snap b/test/components/__snapshots__/Toast.spec.ts.snap
index 47a668d876..f3ace738ba 100644
--- a/test/components/__snapshots__/Toast.spec.ts.snap
+++ b/test/components/__snapshots__/Toast.spec.ts.snap
@@ -8,27 +8,27 @@ exports[`Toast > renders with actions correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
       <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
         <!--v-if-->
-        <div class="flex gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-            <!--v-if--><span class="truncate">Action</span>
+        <div data-slot="actions" class="flex gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Action</span>
             <!--v-if-->
           </button></div>
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -48,24 +48,24 @@ exports[`Toast > renders with as correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <section data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <section data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
       <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -85,23 +85,23 @@ exports[`Toast > renders with avatar correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-11 text-[22px] shrink-0"><img src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover"></span>
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-11 text-[22px] shrink-0"><img src="https://github.com/benjamincanac.png" width="44" height="44" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -121,24 +121,24 @@ exports[`Toast > renders with class correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start bg-elevated/50" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start bg-elevated/50" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
       <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -158,21 +158,21 @@ exports[`Toast > renders with close slot correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
       <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
         <!--v-if-->Close slot
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -192,24 +192,24 @@ exports[`Toast > renders with closeIcon correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
       <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true"></span>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -229,24 +229,24 @@ exports[`Toast > renders with color neutral correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
       <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-inverted data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-inverted data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -266,24 +266,24 @@ exports[`Toast > renders with description correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
       <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
-        <div class="text-sm text-muted mt-1">This is a toast</div>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
+        <div data-slot="description" class="text-sm text-muted mt-1">This is a toast</div>
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -303,24 +303,24 @@ exports[`Toast > renders with description slot correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
       <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
-        <div class="text-sm text-muted mt-1">Description slot</div>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
+        <div data-slot="description" class="text-sm text-muted mt-1">Description slot</div>
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -340,23 +340,23 @@ exports[`Toast > renders with icon correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right"><span class="iconify i-lucide:rocket shrink-0 size-5 text-primary" aria-hidden="true"></span>
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right"><span class="iconify i-lucide:rocket shrink-0 size-5 text-primary" aria-hidden="true" data-slot="icon"></span>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -376,22 +376,22 @@ exports[`Toast > renders with leading slot correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">Leading slot<div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">Leading slot<div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -411,24 +411,24 @@ exports[`Toast > renders with orientation horizontal correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="horizontal" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right"><span class="iconify i-lucide:rocket shrink-0 size-5 text-primary" aria-hidden="true"></span>
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
-        <div class="text-sm text-muted mt-1">This is a toast</div>
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="horizontal" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right"><span class="iconify i-lucide:rocket shrink-0 size-5 text-primary" aria-hidden="true" data-slot="icon"></span>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
+        <div data-slot="description" class="text-sm text-muted mt-1">This is a toast</div>
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-          <!--v-if--><span class="truncate">Action</span>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          <!--v-if--><span data-slot="label" class="truncate">Action</span>
           <!--v-if-->
-        </button><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+        </button><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
         </button></div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -448,26 +448,26 @@ exports[`Toast > renders with orientation vertical correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right"><span class="iconify i-lucide:rocket shrink-0 size-5 text-primary" aria-hidden="true"></span>
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
-        <div class="text-sm text-muted mt-1">This is a toast</div>
-        <div class="flex gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
-            <!--v-if--><span class="truncate">Action</span>
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right"><span class="iconify i-lucide:rocket shrink-0 size-5 text-primary" aria-hidden="true" data-slot="icon"></span>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
+        <div data-slot="description" class="text-sm text-muted mt-1">This is a toast</div>
+        <div data-slot="actions" class="flex gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+            <!--v-if--><span data-slot="label" class="truncate">Action</span>
             <!--v-if-->
           </button></div>
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -487,24 +487,24 @@ exports[`Toast > renders with title correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
       <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -524,24 +524,24 @@ exports[`Toast > renders with title slot correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
       <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Title slot</div>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Title slot</div>
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -561,24 +561,24 @@ exports[`Toast > renders with type correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
       <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -598,24 +598,24 @@ exports[`Toast > renders with ui correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
       <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm text-highlighted font-bold">Toast</div>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm text-highlighted font-bold">Toast</div>
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="flex gap-1.5 shrink-0 items-center">
-        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+      <div data-slot="actions" class="flex gap-1.5 shrink-0 items-center">
+        <!--v-if--><button type="button" data-reka-toast-announce-exclude="" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
           <!--v-if-->
         </button>
       </div>
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -635,19 +635,19 @@ exports[`Toast > renders without close correctly 1`] = `
 
 
 <div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+  <ol tabindex="-1" data-expanded="true" data-slot="viewport" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li data-reka-collection-item="" role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" data-slot="root" class="relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
       <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col">
-        <div class="text-sm font-medium text-highlighted">Toast</div>
+      <div data-slot="wrapper" class="w-0 flex-1 flex flex-col">
+        <div data-slot="title" class="text-sm font-medium text-highlighted">Toast</div>
         <!--v-if-->
         <!--v-if-->
       </div>
       <!--v-if-->
-      <div data-orientation="horizontal" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
+      <div data-orientation="horizontal" data-slot="progress" class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
diff --git a/test/components/__snapshots__/Tooltip-vue.spec.ts.snap b/test/components/__snapshots__/Tooltip-vue.spec.ts.snap
index 25e8592472..7e7d0d862b 100644
--- a/test/components/__snapshots__/Tooltip-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Tooltip-vue.spec.ts.snap
@@ -6,8 +6,8 @@ exports[`Tooltip > renders with arrow correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto" data-state="instant-open" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span>
-    <!--v-if--><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" class="fill-default" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" id="" role="tooltip">Tooltip</span>
+  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-slot="content" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto" data-state="instant-open" data-side="bottom" data-align="center"><span data-slot="text" class="truncate">Tooltip</span>
+    <!--v-if--><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" data-slot="arrow" class="fill-default" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" id="" role="tooltip">Tooltip</span>
   </div>
 </div>
 
@@ -21,7 +21,7 @@ exports[`Tooltip > renders with class correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto text-sm" data-state="instant-open" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span>
+  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-slot="content" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto text-sm" data-state="instant-open" data-side="bottom" data-align="center"><span data-slot="text" class="truncate">Tooltip</span>
     <!--v-if-->
     <!--v-if--><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" id="" role="tooltip">Tooltip</span>
   </div>
@@ -37,7 +37,7 @@ exports[`Tooltip > renders with content slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto" data-state="instant-open" data-side="bottom" data-align="center">Content slot
+  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-slot="content" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto" data-state="instant-open" data-side="bottom" data-align="center">Content slot
     <!--v-if--><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" id="" role="tooltip">Content slot</span>
   </div>
 </div>
@@ -52,7 +52,7 @@ exports[`Tooltip > renders with default slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto" data-state="instant-open" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span>
+  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-slot="content" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto" data-state="instant-open" data-side="bottom" data-align="center"><span data-slot="text" class="truncate">Tooltip</span>
     <!--v-if-->
     <!--v-if--><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" id="reka-tooltip-content-v-0" role="tooltip">Tooltip</span>
   </div>
@@ -68,7 +68,7 @@ exports[`Tooltip > renders with kbds correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto" data-state="instant-open" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5 not-first-of-type:before:content-['·'] not-first-of-type:before:me-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">K</kbd></span>
+  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-slot="content" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto" data-state="instant-open" data-side="bottom" data-align="center"><span data-slot="text" class="truncate">Tooltip</span><span data-slot="kbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5 not-first-of-type:before:content-['·'] not-first-of-type:before:me-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">K</kbd></span>
     <!--v-if--><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" id="" role="tooltip">Tooltip</span>
   </div>
 </div>
@@ -83,7 +83,7 @@ exports[`Tooltip > renders with text correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto" data-state="instant-open" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span>
+  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-slot="content" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto" data-state="instant-open" data-side="bottom" data-align="center"><span data-slot="text" class="truncate">Tooltip</span>
     <!--v-if-->
     <!--v-if--><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" id="" role="tooltip">Tooltip</span>
   </div>
@@ -99,7 +99,7 @@ exports[`Tooltip > renders with ui correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto text-sm" data-state="instant-open" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span>
+  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-slot="content" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto text-sm" data-state="instant-open" data-side="bottom" data-align="center"><span data-slot="text" class="truncate">Tooltip</span>
     <!--v-if-->
     <!--v-if--><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" id="" role="tooltip">Tooltip</span>
   </div>
diff --git a/test/components/__snapshots__/Tooltip.spec.ts.snap b/test/components/__snapshots__/Tooltip.spec.ts.snap
index a597496c6d..9a82163d45 100644
--- a/test/components/__snapshots__/Tooltip.spec.ts.snap
+++ b/test/components/__snapshots__/Tooltip.spec.ts.snap
@@ -6,8 +6,8 @@ exports[`Tooltip > renders with arrow correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto" data-state="instant-open" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span>
-    <!--v-if--><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" class="fill-default" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" id="" role="tooltip">Tooltip</span>
+  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-slot="content" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto" data-state="instant-open" data-side="bottom" data-align="center"><span data-slot="text" class="truncate">Tooltip</span>
+    <!--v-if--><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" data-slot="arrow" class="fill-default" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" id="" role="tooltip">Tooltip</span>
   </div>
 </div>
 
@@ -21,7 +21,7 @@ exports[`Tooltip > renders with class correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto text-sm" data-state="instant-open" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span>
+  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-slot="content" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto text-sm" data-state="instant-open" data-side="bottom" data-align="center"><span data-slot="text" class="truncate">Tooltip</span>
     <!--v-if-->
     <!--v-if--><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" id="" role="tooltip">Tooltip</span>
   </div>
@@ -37,7 +37,7 @@ exports[`Tooltip > renders with content slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto" data-state="instant-open" data-side="bottom" data-align="center">Content slot
+  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-slot="content" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto" data-state="instant-open" data-side="bottom" data-align="center">Content slot
     <!--v-if--><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" id="" role="tooltip">Content slot</span>
   </div>
 </div>
@@ -52,7 +52,7 @@ exports[`Tooltip > renders with default slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto" data-state="instant-open" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span>
+  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-slot="content" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto" data-state="instant-open" data-side="bottom" data-align="center"><span data-slot="text" class="truncate">Tooltip</span>
     <!--v-if-->
     <!--v-if--><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" id="reka-tooltip-content-v-0-0-0" role="tooltip">Tooltip</span>
   </div>
@@ -68,7 +68,7 @@ exports[`Tooltip > renders with kbds correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto" data-state="instant-open" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5 not-first-of-type:before:content-['·'] not-first-of-type:before:me-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">K</kbd></span>
+  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-slot="content" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto" data-state="instant-open" data-side="bottom" data-align="center"><span data-slot="text" class="truncate">Tooltip</span><span data-slot="kbds" class="hidden lg:inline-flex items-center shrink-0 gap-0.5 not-first-of-type:before:content-['·'] not-first-of-type:before:me-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-4 min-w-[16px] text-[10px] ring ring-inset ring-accented text-default bg-default">K</kbd></span>
     <!--v-if--><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" id="" role="tooltip">Tooltip</span>
   </div>
 </div>
@@ -83,7 +83,7 @@ exports[`Tooltip > renders with text correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto" data-state="instant-open" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span>
+  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-slot="content" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto" data-state="instant-open" data-side="bottom" data-align="center"><span data-slot="text" class="truncate">Tooltip</span>
     <!--v-if-->
     <!--v-if--><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" id="" role="tooltip">Tooltip</span>
   </div>
@@ -99,7 +99,7 @@ exports[`Tooltip > renders with ui correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto text-sm" data-state="instant-open" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span>
+  <div data-dismissable-layer="" style="--reka-tooltip-content-transform-origin: var(--reka-popper-transform-origin); --reka-tooltip-content-available-width: var(--reka-popper-available-width); --reka-tooltip-content-available-height: var(--reka-popper-available-height); --reka-tooltip-trigger-width: var(--reka-popper-anchor-width); --reka-tooltip-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-slot="content" class="flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto text-sm" data-state="instant-open" data-side="bottom" data-align="center"><span data-slot="text" class="truncate">Tooltip</span>
     <!--v-if-->
     <!--v-if--><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" id="" role="tooltip">Tooltip</span>
   </div>
diff --git a/test/components/__snapshots__/Tree-vue.spec.ts.snap b/test/components/__snapshots__/Tree-vue.spec.ts.snap
index 34dd0d3591..a8bc5f62d5 100644
--- a/test/components/__snapshots__/Tree-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Tree-vue.spec.ts.snap
@@ -1,16 +1,16 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Tree > renders with as correctly 1`] = `
-"<div class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<div data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -19,16 +19,16 @@ exports[`Tree > renders with as correctly 1`] = `
 `;
 
 exports[`Tree > renders with class correctly 1`] = `
-"<ul class="isolate absolute" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<ul data-slot="root" class="isolate absolute" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -37,24 +37,24 @@ exports[`Tree > renders with class correctly 1`] = `
 `;
 
 exports[`Tree > renders with collapsedIcon correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">Default Collapsed</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">Default Collapsed</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
     <!--v-if-->
   </li>
 </ul>"
 `;
 
 exports[`Tree > renders with default slot correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -63,16 +63,16 @@ exports[`Tree > renders with default slot correctly 1`] = `
 `;
 
 exports[`Tree > renders with defaultExpanded correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -81,16 +81,16 @@ exports[`Tree > renders with defaultExpanded correctly 1`] = `
 `;
 
 exports[`Tree > renders with defaultValue correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="1" data-indent="1" data-selected="" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 before:bg-elevated text-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="1" data-indent="1" data-selected="" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 before:bg-elevated text-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -99,18 +99,18 @@ exports[`Tree > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`Tree > renders with defautExpanded item correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="true" aria-level="1" data-indent="1" data-expanded="" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">Default Expanded</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
-    <ul role="group" class="border-s border-default ms-5">
-      <li role="presentation" class="ps-1.5 -ms-px"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="2" data-indent="2" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="true" aria-level="1" data-indent="1" data-expanded="" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">Default Expanded</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+    <ul role="group" data-slot="listWithChildren" class="border-s border-default ms-5">
+      <li role="presentation" class="ps-1.5 -ms-px"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="2" data-indent="2" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
         <!--v-if-->
       </li>
-      <li role="presentation" class="ps-1.5 -ms-px"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="2" data-indent="2" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app.vue</span>
+      <li role="presentation" class="ps-1.5 -ms-px"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="2" data-indent="2" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app.vue</span>
           <!--v-if-->
         </button>
         <!--v-if-->
       </li>
-      <li role="presentation" class="ps-1.5 -ms-px"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="2" data-indent="2" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">nuxt.config.ts</span>
+      <li role="presentation" class="ps-1.5 -ms-px"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="2" data-indent="2" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -121,16 +121,16 @@ exports[`Tree > renders with defautExpanded item correctly 1`] = `
 `;
 
 exports[`Tree > renders with disabled correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" disabled="" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" disabled="" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" disabled="" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" disabled="" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" disabled="" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" disabled="" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -139,24 +139,24 @@ exports[`Tree > renders with disabled correctly 1`] = `
 `;
 
 exports[`Tree > renders with disabled item correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" disabled="" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">Disabled item</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" disabled="" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">Disabled item</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
     <!--v-if-->
   </li>
 </ul>"
 `;
 
 exports[`Tree > renders with dynamic slot correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors">dynamic slot</button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors">dynamic slot</button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -165,16 +165,16 @@ exports[`Tree > renders with dynamic slot correctly 1`] = `
 `;
 
 exports[`Tree > renders with expanded correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -183,18 +183,18 @@ exports[`Tree > renders with expanded correctly 1`] = `
 `;
 
 exports[`Tree > renders with expandedIcon correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="true" aria-level="1" data-indent="1" data-expanded="" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">Default Expanded</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
-    <ul role="group" class="border-s border-default ms-5">
-      <li role="presentation" class="ps-1.5 -ms-px"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="2" data-indent="2" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="true" aria-level="1" data-indent="1" data-expanded="" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">Default Expanded</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+    <ul role="group" data-slot="listWithChildren" class="border-s border-default ms-5">
+      <li role="presentation" class="ps-1.5 -ms-px"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="2" data-indent="2" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
         <!--v-if-->
       </li>
-      <li role="presentation" class="ps-1.5 -ms-px"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="2" data-indent="2" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app.vue</span>
+      <li role="presentation" class="ps-1.5 -ms-px"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="2" data-indent="2" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app.vue</span>
           <!--v-if-->
         </button>
         <!--v-if-->
       </li>
-      <li role="presentation" class="ps-1.5 -ms-px"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="2" data-indent="2" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">nuxt.config.ts</span>
+      <li role="presentation" class="ps-1.5 -ms-px"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="2" data-indent="2" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -205,16 +205,16 @@ exports[`Tree > renders with expandedIcon correctly 1`] = `
 `;
 
 exports[`Tree > renders with getKey correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -223,30 +223,30 @@ exports[`Tree > renders with getKey correctly 1`] = `
 `;
 
 exports[`Tree > renders with item slot correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors">item slot</button>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors">item slot</button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors">item slot</button>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors">item slot</button>
     <!--v-if-->
   </li>
 </ul>"
 `;
 
 exports[`Tree > renders with item-leading slot correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors">leading slot<span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors">leading slot<span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors">leading slot<span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors">leading slot<span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -255,22 +255,22 @@ exports[`Tree > renders with item-leading slot correctly 1`] = `
 `;
 
 exports[`Tree > renders with item-trailing slot correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app.vue</span><span class="ms-auto inline-flex gap-1.5 items-center">trailing slot</span></button>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app.vue</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center">trailing slot</span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">nuxt.config.ts</span><span class="ms-auto inline-flex gap-1.5 items-center">trailing slot</span></button>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center">trailing slot</span></button>
     <!--v-if-->
   </li>
 </ul>"
 `;
 
 exports[`Tree > renders with item-wrapper slot correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
     <!--v-if-->
   </li>
   <li role="presentation" class="w-full">wrapper slot
@@ -283,16 +283,16 @@ exports[`Tree > renders with item-wrapper slot correctly 1`] = `
 `;
 
 exports[`Tree > renders with items correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -301,16 +301,16 @@ exports[`Tree > renders with items correctly 1`] = `
 `;
 
 exports[`Tree > renders with labelKey correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">root</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">root</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app-vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app-vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">nuxt-config-ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">nuxt-config-ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -319,16 +319,16 @@ exports[`Tree > renders with labelKey correctly 1`] = `
 `;
 
 exports[`Tree > renders with modelValue correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="1" data-indent="1" data-selected="" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 before:bg-elevated text-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="1" data-indent="1" data-selected="" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 before:bg-elevated text-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -337,16 +337,16 @@ exports[`Tree > renders with modelValue correctly 1`] = `
 `;
 
 exports[`Tree > renders with multiple and defaultValue correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree" aria-multiselectable="true">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="1" data-indent="1" data-selected="" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 before:bg-elevated text-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree" aria-multiselectable="true">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="1" data-indent="1" data-selected="" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 before:bg-elevated text-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="true" aria-level="1" data-indent="1" data-selected="" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 before:bg-elevated text-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="true" aria-level="1" data-indent="1" data-selected="" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 before:bg-elevated text-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -355,16 +355,16 @@ exports[`Tree > renders with multiple and defaultValue correctly 1`] = `
 `;
 
 exports[`Tree > renders with multiple and modelValue correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree" aria-multiselectable="true">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="1" data-indent="1" data-selected="" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 before:bg-elevated text-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree" aria-multiselectable="true">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="1" data-indent="1" data-selected="" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 before:bg-elevated text-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="true" aria-level="1" data-indent="1" data-selected="" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 before:bg-elevated text-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="true" aria-level="1" data-indent="1" data-selected="" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 before:bg-elevated text-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -373,16 +373,16 @@ exports[`Tree > renders with multiple and modelValue correctly 1`] = `
 `;
 
 exports[`Tree > renders with multiple correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree" aria-multiselectable="true">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree" aria-multiselectable="true">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -391,16 +391,16 @@ exports[`Tree > renders with multiple correctly 1`] = `
 `;
 
 exports[`Tree > renders with neutral color correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -409,16 +409,16 @@ exports[`Tree > renders with neutral color correctly 1`] = `
 `;
 
 exports[`Tree > renders with size lg correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 text-sm gap-2 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 text-sm gap-2 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 text-sm gap-2 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 text-sm gap-2 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 text-sm gap-2 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 text-sm gap-2 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -427,16 +427,16 @@ exports[`Tree > renders with size lg correctly 1`] = `
 `;
 
 exports[`Tree > renders with size md correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -445,16 +445,16 @@ exports[`Tree > renders with size md correctly 1`] = `
 `;
 
 exports[`Tree > renders with size sm correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-xs gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-4"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-4"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-xs gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-4"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-4"></svg></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-xs gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-4"></svg><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-xs gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-4"></svg><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-xs gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-4"></svg><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-xs gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-4"></svg><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -463,16 +463,16 @@ exports[`Tree > renders with size sm correctly 1`] = `
 `;
 
 exports[`Tree > renders with size xl correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 text-base gap-2 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-6"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-6"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 text-base gap-2 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-6"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-6"></svg></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 text-base gap-2 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-6"></svg><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 text-base gap-2 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-6"></svg><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 text-base gap-2 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-6"></svg><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 text-base gap-2 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-6"></svg><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -481,16 +481,16 @@ exports[`Tree > renders with size xl correctly 1`] = `
 `;
 
 exports[`Tree > renders with size xs correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2 py-1 text-xs gap-1 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-4"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-4"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2 py-1 text-xs gap-1 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-4"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-4"></svg></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2 py-1 text-xs gap-1 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-4"></svg><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2 py-1 text-xs gap-1 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-4"></svg><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2 py-1 text-xs gap-1 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-4"></svg><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2 py-1 text-xs gap-1 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-4"></svg><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -499,16 +499,16 @@ exports[`Tree > renders with size xs correctly 1`] = `
 `;
 
 exports[`Tree > renders with trailingIcon correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -517,16 +517,16 @@ exports[`Tree > renders with trailingIcon correctly 1`] = `
 `;
 
 exports[`Tree > renders with ui correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors font-bold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors font-bold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors font-bold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors font-bold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors font-bold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors font-bold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -535,22 +535,22 @@ exports[`Tree > renders with ui correctly 1`] = `
 `;
 
 exports[`Tree > renders with virtualize correctly 1`] = `
-"<ul class="relative isolate overflow-y-auto" tabindex="-1" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+"<ul data-slot="root" class="relative isolate overflow-y-auto" tabindex="-1" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
   <div data-reka-virtualizer="" style="position: relative; width: 100%; height: 96px;"></div>
 </ul>"
 `;
 
 exports[`Tree > renders without nested correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5"></svg></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 relative size-5"></svg><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 relative size-5"></svg><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
diff --git a/test/components/__snapshots__/Tree.spec.ts.snap b/test/components/__snapshots__/Tree.spec.ts.snap
index b8eff43fa0..39bec0e4ff 100644
--- a/test/components/__snapshots__/Tree.spec.ts.snap
+++ b/test/components/__snapshots__/Tree.spec.ts.snap
@@ -1,16 +1,16 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Tree > renders with as correctly 1`] = `
-"<div class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<div data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -19,16 +19,16 @@ exports[`Tree > renders with as correctly 1`] = `
 `;
 
 exports[`Tree > renders with class correctly 1`] = `
-"<ul class="isolate absolute" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="isolate absolute" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -37,24 +37,24 @@ exports[`Tree > renders with class correctly 1`] = `
 `;
 
 exports[`Tree > renders with collapsedIcon correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:chevron-down shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">Default Collapsed</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:chevron-down shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Default Collapsed</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
 </ul>"
 `;
 
 exports[`Tree > renders with default slot correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -63,16 +63,16 @@ exports[`Tree > renders with default slot correctly 1`] = `
 `;
 
 exports[`Tree > renders with defaultExpanded correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -81,16 +81,16 @@ exports[`Tree > renders with defaultExpanded correctly 1`] = `
 `;
 
 exports[`Tree > renders with defaultValue correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="1" data-indent="1" data-selected="" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 before:bg-elevated text-primary"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="1" data-indent="1" data-selected="" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 before:bg-elevated text-primary"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -99,18 +99,18 @@ exports[`Tree > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`Tree > renders with defautExpanded item correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="true" aria-level="1" data-indent="1" data-expanded="" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-open shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">Default Expanded</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
-    <ul role="group" class="border-s border-default ms-5">
-      <li role="presentation" class="ps-1.5 -ms-px"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="2" data-indent="2" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="true" aria-level="1" data-indent="1" data-expanded="" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-open shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Default Expanded</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
+    <ul role="group" data-slot="listWithChildren" class="border-s border-default ms-5">
+      <li role="presentation" class="ps-1.5 -ms-px"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="2" data-indent="2" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
         <!--v-if-->
       </li>
-      <li role="presentation" class="ps-1.5 -ms-px"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="2" data-indent="2" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+      <li role="presentation" class="ps-1.5 -ms-px"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="2" data-indent="2" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app.vue</span>
           <!--v-if-->
         </button>
         <!--v-if-->
       </li>
-      <li role="presentation" class="ps-1.5 -ms-px"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="2" data-indent="2" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+      <li role="presentation" class="ps-1.5 -ms-px"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="2" data-indent="2" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -121,16 +121,16 @@ exports[`Tree > renders with defautExpanded item correctly 1`] = `
 `;
 
 exports[`Tree > renders with disabled correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" disabled="" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 cursor-not-allowed opacity-75"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" disabled="" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 cursor-not-allowed opacity-75"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" disabled="" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 cursor-not-allowed opacity-75"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" disabled="" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 cursor-not-allowed opacity-75"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" disabled="" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 cursor-not-allowed opacity-75"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" disabled="" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 cursor-not-allowed opacity-75"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -139,24 +139,24 @@ exports[`Tree > renders with disabled correctly 1`] = `
 `;
 
 exports[`Tree > renders with disabled item correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" disabled="" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 cursor-not-allowed opacity-75"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">Disabled item</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" disabled="" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 cursor-not-allowed opacity-75"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Disabled item</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
 </ul>"
 `;
 
 exports[`Tree > renders with dynamic slot correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors">dynamic slot</button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors">dynamic slot</button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -165,16 +165,16 @@ exports[`Tree > renders with dynamic slot correctly 1`] = `
 `;
 
 exports[`Tree > renders with expanded correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -183,18 +183,18 @@ exports[`Tree > renders with expanded correctly 1`] = `
 `;
 
 exports[`Tree > renders with expandedIcon correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="true" aria-level="1" data-indent="1" data-expanded="" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:chevron-up shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">Default Expanded</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
-    <ul role="group" class="border-s border-default ms-5">
-      <li role="presentation" class="ps-1.5 -ms-px"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="2" data-indent="2" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="true" aria-level="1" data-indent="1" data-expanded="" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:chevron-up shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">Default Expanded</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
+    <ul role="group" data-slot="listWithChildren" class="border-s border-default ms-5">
+      <li role="presentation" class="ps-1.5 -ms-px"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="2" data-indent="2" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
         <!--v-if-->
       </li>
-      <li role="presentation" class="ps-1.5 -ms-px"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="2" data-indent="2" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+      <li role="presentation" class="ps-1.5 -ms-px"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="2" data-indent="2" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app.vue</span>
           <!--v-if-->
         </button>
         <!--v-if-->
       </li>
-      <li role="presentation" class="ps-1.5 -ms-px"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="2" data-indent="2" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+      <li role="presentation" class="ps-1.5 -ms-px"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="2" data-indent="2" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -205,16 +205,16 @@ exports[`Tree > renders with expandedIcon correctly 1`] = `
 `;
 
 exports[`Tree > renders with getKey correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -223,30 +223,30 @@ exports[`Tree > renders with getKey correctly 1`] = `
 `;
 
 exports[`Tree > renders with item slot correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors">item slot</button>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors">item slot</button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors">item slot</button>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors">item slot</button>
     <!--v-if-->
   </li>
 </ul>"
 `;
 
 exports[`Tree > renders with item-leading slot correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors">leading slot<span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors">leading slot<span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors">leading slot<span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors">leading slot<span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -255,22 +255,22 @@ exports[`Tree > renders with item-leading slot correctly 1`] = `
 `;
 
 exports[`Tree > renders with item-trailing slot correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app.vue</span><span class="ms-auto inline-flex gap-1.5 items-center">trailing slot</span></button>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app.vue</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center">trailing slot</span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span><span class="ms-auto inline-flex gap-1.5 items-center">trailing slot</span></button>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center">trailing slot</span></button>
     <!--v-if-->
   </li>
 </ul>"
 `;
 
 exports[`Tree > renders with item-wrapper slot correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
   <li role="presentation" class="w-full">wrapper slot
@@ -283,16 +283,16 @@ exports[`Tree > renders with item-wrapper slot correctly 1`] = `
 `;
 
 exports[`Tree > renders with items correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -301,16 +301,16 @@ exports[`Tree > renders with items correctly 1`] = `
 `;
 
 exports[`Tree > renders with labelKey correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">root</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">root</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app-vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app-vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">nuxt-config-ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">nuxt-config-ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -319,16 +319,16 @@ exports[`Tree > renders with labelKey correctly 1`] = `
 `;
 
 exports[`Tree > renders with modelValue correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="1" data-indent="1" data-selected="" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 before:bg-elevated text-primary"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="1" data-indent="1" data-selected="" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 before:bg-elevated text-primary"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -337,16 +337,16 @@ exports[`Tree > renders with modelValue correctly 1`] = `
 `;
 
 exports[`Tree > renders with multiple and defaultValue correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree" aria-multiselectable="true">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="1" data-indent="1" data-selected="" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 before:bg-elevated text-primary"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree" aria-multiselectable="true">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="1" data-indent="1" data-selected="" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 before:bg-elevated text-primary"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="true" aria-level="1" data-indent="1" data-selected="" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 before:bg-elevated text-primary"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="true" aria-level="1" data-indent="1" data-selected="" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 before:bg-elevated text-primary"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -355,16 +355,16 @@ exports[`Tree > renders with multiple and defaultValue correctly 1`] = `
 `;
 
 exports[`Tree > renders with multiple and modelValue correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree" aria-multiselectable="true">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="1" data-indent="1" data-selected="" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 before:bg-elevated text-primary"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree" aria-multiselectable="true">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="1" data-indent="1" data-selected="" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 before:bg-elevated text-primary"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="true" aria-level="1" data-indent="1" data-selected="" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 before:bg-elevated text-primary"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="true" aria-level="1" data-indent="1" data-selected="" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 before:bg-elevated text-primary"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -373,16 +373,16 @@ exports[`Tree > renders with multiple and modelValue correctly 1`] = `
 `;
 
 exports[`Tree > renders with multiple correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree" aria-multiselectable="true">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree" aria-multiselectable="true">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -391,16 +391,16 @@ exports[`Tree > renders with multiple correctly 1`] = `
 `;
 
 exports[`Tree > renders with neutral color correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -409,16 +409,16 @@ exports[`Tree > renders with neutral color correctly 1`] = `
 `;
 
 exports[`Tree > renders with size lg correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 text-sm gap-2 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 text-sm gap-2 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 text-sm gap-2 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 text-sm gap-2 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 text-sm gap-2 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 text-sm gap-2 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -427,16 +427,16 @@ exports[`Tree > renders with size lg correctly 1`] = `
 `;
 
 exports[`Tree > renders with size md correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -445,16 +445,16 @@ exports[`Tree > renders with size md correctly 1`] = `
 `;
 
 exports[`Tree > renders with size sm correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-xs gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-4" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-4" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-xs gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-4" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-4" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-xs gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-4" aria-hidden="true"></span><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-xs gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-4" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-xs gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-4" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-xs gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-4" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -463,16 +463,16 @@ exports[`Tree > renders with size sm correctly 1`] = `
 `;
 
 exports[`Tree > renders with size xl correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 text-base gap-2 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-6" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-6" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 text-base gap-2 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-6" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-6" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 text-base gap-2 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-6" aria-hidden="true"></span><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 text-base gap-2 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-6" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 text-base gap-2 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-6" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 text-base gap-2 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-6" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -481,16 +481,16 @@ exports[`Tree > renders with size xl correctly 1`] = `
 `;
 
 exports[`Tree > renders with size xs correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2 py-1 text-xs gap-1 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-4" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-4" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2 py-1 text-xs gap-1 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-4" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-4" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2 py-1 text-xs gap-1 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-4" aria-hidden="true"></span><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2 py-1 text-xs gap-1 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-4" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2 py-1 text-xs gap-1 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-4" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2 py-1 text-xs gap-1 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-4" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -499,16 +499,16 @@ exports[`Tree > renders with size xs correctly 1`] = `
 `;
 
 exports[`Tree > renders with trailingIcon correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:arrow-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:arrow-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -517,16 +517,16 @@ exports[`Tree > renders with trailingIcon correctly 1`] = `
 `;
 
 exports[`Tree > renders with ui correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors font-bold"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors font-bold"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors font-bold"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors font-bold"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors font-bold"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors font-bold"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
@@ -535,22 +535,22 @@ exports[`Tree > renders with ui correctly 1`] = `
 `;
 
 exports[`Tree > renders with virtualize correctly 1`] = `
-"<ul class="relative isolate overflow-y-auto" tabindex="-1" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+"<ul data-slot="root" class="relative isolate overflow-y-auto" tabindex="-1" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
   <div data-reka-virtualizer="" style="position: relative; width: 100%; height: 96px;"></div>
 </ul>"
 `;
 
 exports[`Tree > renders without nested correctly 1`] = `
-"<ul class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
+"<ul data-slot="root" class="relative isolate" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree">
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app</span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true" data-slot="linkTrailingIcon"></span></span></button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-vue shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">app.vue</span>
       <!--v-if-->
     </button>
     <!--v-if-->
   </li>
-  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
+  <li role="presentation" class="w-full"><button data-reka-collection-item="" tabindex="-1" data-orientation="vertical" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" type="button" data-slot="link" class="relative group w-full flex items-center select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 text-sm gap-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 relative size-5" aria-hidden="true" data-slot="linkLeadingIcon"></span><span data-slot="linkLabel" class="truncate">nuxt.config.ts</span>
       <!--v-if-->
     </button>
     <!--v-if-->
diff --git a/test/components/__snapshots__/User-vue.spec.ts.snap b/test/components/__snapshots__/User-vue.spec.ts.snap
index 9a09e05569..fd6b221ed5 100644
--- a/test/components/__snapshots__/User-vue.spec.ts.snap
+++ b/test/components/__snapshots__/User-vue.spec.ts.snap
@@ -1,230 +1,230 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`User > renders with as correctly 1`] = `
-"<section data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<section data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </section>"
 `;
 
 exports[`User > renders with avatar correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with avatar slot correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2">Avatar slot<div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2">Avatar slot<div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with chip correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2">
-  <div class="relative inline-flex items-center justify-center shrink-0"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute"></span></div>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2">
+  <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute"></span></div>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with class correctly 1`] = `
-"<div data-orientation="horizontal" class="group/user flex items-center gap-2 absolute"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="group/user flex items-center gap-2 absolute"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with default slot correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->Default slot
   </div>
 </div>"
 `;
 
 exports[`User > renders with description correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2">
   <!--v-if-->
-  <div class="">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with description slot correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-    <p class="text-muted text-xs">Description slot</p>
+    <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Description slot</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with name correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2">
   <!--v-if-->
-  <div class="">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+    <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`User > renders with name slot correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-sm">Name slot</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-sm">Name slot</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with orientation horizontal correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with orientation vertical correctly 1`] = `
-"<div data-orientation="vertical" class="relative group/user flex flex-col gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="vertical" data-slot="root" class="relative group/user flex flex-col gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with size 2xl correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-11 text-[22px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-11 text-[22px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="44" height="44" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-base">Benjamin Canac</p>
-    <p class="text-muted text-base">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-base">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-base">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with size 2xs correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="flex items-center gap-1.5">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="flex items-center gap-1.5">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-xs">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-xs">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with size 3xl correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-12 text-2xl shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="48" height="48" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-12 text-2xl shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="48" height="48" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-lg">Benjamin Canac</p>
-    <p class="text-muted text-base">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-lg">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-base">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with size 3xs correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-1"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="flex items-center gap-1">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-1"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="16" height="16" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="flex items-center gap-1">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-xs">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-xs">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with size lg correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-9 text-lg shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="36" height="36" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-9 text-lg shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="36" height="36" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-    <p class="text-muted text-sm">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-sm">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with size md correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with size sm correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-7 text-sm shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="28" height="28" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-7 text-sm shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="28" height="28" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-xs">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-xs">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with size xl correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-10 text-xl shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="40" height="40" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-10 text-xl shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="40" height="40" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-base">Benjamin Canac</p>
-    <p class="text-muted text-sm">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-base">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-sm">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with size xs correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-6 text-xs shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="flex items-center gap-1.5">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-6 text-xs shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="24" height="24" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="flex items-center gap-1.5">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-xs">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-xs">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with to correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0 transform transition-transform duration-200 group-hover/user:scale-115"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class=""><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Benjamin Canac" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <p class="font-medium text-default peer-hover:text-highlighted transition-colors text-sm">Benjamin Canac</p>
-    <p class="text-muted peer-hover:text-toned transition-colors text-xs">Software Engineer</p>
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0 transform transition-transform duration-200 group-hover/user:scale-115"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class=""><a href="https://github.com/benjamincanac" tabindex="-1" target="_blank" aria-label="Benjamin Canac" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <p data-slot="name" class="font-medium text-default peer-hover:text-highlighted transition-colors text-sm">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted peer-hover:text-toned transition-colors text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with ui correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="text-highlighted text-sm font-bold">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="text-highlighted text-sm font-bold">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
diff --git a/test/components/__snapshots__/User.spec.ts.snap b/test/components/__snapshots__/User.spec.ts.snap
index 9d734db29a..1ad7a5a2a5 100644
--- a/test/components/__snapshots__/User.spec.ts.snap
+++ b/test/components/__snapshots__/User.spec.ts.snap
@@ -1,230 +1,230 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`User > renders with as correctly 1`] = `
-"<section data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<section data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </section>"
 `;
 
 exports[`User > renders with avatar correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with avatar slot correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2">Avatar slot<div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2">Avatar slot<div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with chip correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2">
-  <div class="relative inline-flex items-center justify-center shrink-0"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute"></span></div>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2">
+  <div data-slot="root" class="relative inline-flex items-center justify-center shrink-0"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="base" class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute"></span></div>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with class correctly 1`] = `
-"<div data-orientation="horizontal" class="group/user flex items-center gap-2 absolute"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="group/user flex items-center gap-2 absolute"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with default slot correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->Default slot
   </div>
 </div>"
 `;
 
 exports[`User > renders with description correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2">
   <!--v-if-->
-  <div class="">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with description slot correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-    <p class="text-muted text-xs">Description slot</p>
+    <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Description slot</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with name correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2">
   <!--v-if-->
-  <div class="">
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+    <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`User > renders with name slot correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-sm">Name slot</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-sm">Name slot</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with orientation horizontal correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with orientation vertical correctly 1`] = `
-"<div data-orientation="vertical" class="relative group/user flex flex-col gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="vertical" data-slot="root" class="relative group/user flex flex-col gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with size 2xl correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-11 text-[22px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-11 text-[22px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="44" height="44" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-base">Benjamin Canac</p>
-    <p class="text-muted text-base">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-base">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-base">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with size 2xs correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="flex items-center gap-1.5">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="flex items-center gap-1.5">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-xs">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-xs">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with size 3xl correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-12 text-2xl shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="48" height="48" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-3"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-12 text-2xl shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="48" height="48" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-lg">Benjamin Canac</p>
-    <p class="text-muted text-base">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-lg">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-base">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with size 3xs correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-1"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="flex items-center gap-1">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-1"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="16" height="16" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="flex items-center gap-1">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-xs">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-xs">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with size lg correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-9 text-lg shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="36" height="36" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-9 text-lg shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="36" height="36" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-    <p class="text-muted text-sm">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-sm">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with size md correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-sm">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-sm">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with size sm correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-7 text-sm shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="28" height="28" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-7 text-sm shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="28" height="28" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-xs">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-xs">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with size xl correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-10 text-xl shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="40" height="40" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-10 text-xl shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="40" height="40" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-base">Benjamin Canac</p>
-    <p class="text-muted text-sm">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-base">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-sm">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with size xs correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-1.5"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-6 text-xs shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="flex items-center gap-1.5">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-1.5"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-6 text-xs shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="24" height="24" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="flex items-center gap-1.5">
     <!--v-if-->
-    <p class="font-medium text-highlighted text-xs">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="font-medium text-highlighted text-xs">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with to correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0 transform transition-transform duration-200 group-hover/user:scale-115"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class=""><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Benjamin Canac" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
-    <p class="font-medium text-default peer-hover:text-highlighted transition-colors text-sm">Benjamin Canac</p>
-    <p class="text-muted peer-hover:text-toned transition-colors text-xs">Software Engineer</p>
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0 transform transition-transform duration-200 group-hover/user:scale-115"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class=""><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Benjamin Canac" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
+    <p data-slot="name" class="font-medium text-default peer-hover:text-highlighted transition-colors text-sm">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted peer-hover:text-toned transition-colors text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
 
 exports[`User > renders with ui correctly 1`] = `
-"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
-  <div class="">
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="User avatar" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
     <!--v-if-->
-    <p class="text-highlighted text-sm font-bold">Benjamin Canac</p>
-    <p class="text-muted text-xs">Software Engineer</p>
+    <p data-slot="name" class="text-highlighted text-sm font-bold">Benjamin Canac</p>
+    <p data-slot="description" class="text-muted text-xs">Software Engineer</p>
   </div>
 </div>"
 `;
diff --git a/test/components/content/__snapshots__/ContentNavigation.spec.ts.snap b/test/components/content/__snapshots__/ContentNavigation.spec.ts.snap
index e9c6fe193e..9a52ac0675 100644
--- a/test/components/content/__snapshots__/ContentNavigation.spec.ts.snap
+++ b/test/components/content/__snapshots__/ContentNavigation.spec.ts.snap
@@ -1,58 +1,58 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ContentNavigation > renders with class correctly 1`] = `
-"<nav class="w-48">
+"<nav data-slot="root" class="w-48">
   <ul class="isolate -mx-2.5 -mt-1.5">
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Getting Started<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">New</span>
-        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Getting Started<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">New</span>
+        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/getting-started" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary before:bg-elevated">
-              <!--v-if--><span class="truncate">Introduction<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary before:bg-elevated">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Introduction<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/installation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Installation<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/installation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Installation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/theming" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Theming<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/theming" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Theming<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/structure" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Structure<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/structure" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Structure<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/content" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Content<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/content" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Content<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
       </div>
     </li>
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Components<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/components/content-navigation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentNavigation<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-navigation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentNavigation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-search" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSearch<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-search" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSearch<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-surround" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSurround<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-surround" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSurround<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-toc" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentToc<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-toc" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentToc<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
@@ -63,58 +63,58 @@ exports[`ContentNavigation > renders with class correctly 1`] = `
 `;
 
 exports[`ContentNavigation > renders with custom slot correctly 1`] = `
-"<nav>
+"<nav data-slot="root">
   <ul class="isolate -mx-2.5 -mt-1.5">
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Getting Started<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">New</span>
-        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Getting Started<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">New</span>
+        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/getting-started" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary before:bg-elevated">
-              <!--v-if--><span class="truncate">Introduction<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary before:bg-elevated">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Introduction<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/installation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Installation<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/installation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Installation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/theming" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Theming<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/theming" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Theming<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/structure" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Structure<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/structure" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Structure<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/content" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Content<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/content" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Content<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
       </div>
     </li>
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Components<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/components/content-navigation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentNavigation<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-navigation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentNavigation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-search" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSearch<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-search" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSearch<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-surround" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSurround<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-surround" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSurround<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-toc" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentToc<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-toc" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentToc<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
@@ -125,58 +125,58 @@ exports[`ContentNavigation > renders with custom slot correctly 1`] = `
 `;
 
 exports[`ContentNavigation > renders with defaultOpen correctly 1`] = `
-"<nav>
+"<nav data-slot="root">
   <ul class="isolate -mx-2.5 -mt-1.5">
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Getting Started<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">New</span>
-        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Getting Started<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">New</span>
+        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/getting-started" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary before:bg-elevated">
-              <!--v-if--><span class="truncate">Introduction<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary before:bg-elevated">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Introduction<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/installation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Installation<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/installation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Installation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/theming" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Theming<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/theming" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Theming<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/structure" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Structure<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/structure" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Structure<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/content" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Content<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/content" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Content<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
       </div>
     </li>
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Components<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/components/content-navigation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentNavigation<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-navigation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentNavigation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-search" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSearch<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-search" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSearch<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-surround" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSurround<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-surround" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSurround<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-toc" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentToc<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-toc" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentToc<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
@@ -187,58 +187,58 @@ exports[`ContentNavigation > renders with defaultOpen correctly 1`] = `
 `;
 
 exports[`ContentNavigation > renders with item slot correctly 1`] = `
-"<nav>
+"<nav data-slot="root">
   <ul class="isolate -mx-2.5 -mt-1.5">
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Getting Started<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">New</span>
-        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Getting Started<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">New</span>
+        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/getting-started" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary before:bg-elevated">
-              <!--v-if--><span class="truncate">Introduction<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary before:bg-elevated">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Introduction<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/installation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Installation<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/installation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Installation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/theming" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Theming<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/theming" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Theming<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/structure" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Structure<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/structure" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Structure<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/content" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Content<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/content" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Content<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
       </div>
     </li>
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Components<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/components/content-navigation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentNavigation<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-navigation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentNavigation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-search" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSearch<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-search" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSearch<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-surround" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSurround<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-surround" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSurround<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-toc" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentToc<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-toc" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentToc<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
@@ -249,58 +249,58 @@ exports[`ContentNavigation > renders with item slot correctly 1`] = `
 `;
 
 exports[`ContentNavigation > renders with item-label slot correctly 1`] = `
-"<nav>
+"<nav data-slot="root">
   <ul class="isolate -mx-2.5 -mt-1.5">
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Getting Started<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">New</span>
-        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Getting Started<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">New</span>
+        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/getting-started" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary before:bg-elevated">
-              <!--v-if--><span class="truncate">Introduction<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary before:bg-elevated">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Introduction<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/installation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Installation<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/installation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Installation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/theming" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Theming<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/theming" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Theming<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/structure" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Structure<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/structure" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Structure<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/content" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Content<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/content" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Content<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
       </div>
     </li>
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Components<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/components/content-navigation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentNavigation<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-navigation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentNavigation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-search" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSearch<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-search" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSearch<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-surround" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSurround<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-surround" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSurround<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-toc" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentToc<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-toc" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentToc<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
@@ -311,58 +311,58 @@ exports[`ContentNavigation > renders with item-label slot correctly 1`] = `
 `;
 
 exports[`ContentNavigation > renders with item-leading slot correctly 1`] = `
-"<nav>
+"<nav data-slot="root">
   <ul class="isolate -mx-2.5 -mt-1.5">
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Getting Started<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">New</span>
-        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Getting Started<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">New</span>
+        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/getting-started" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary before:bg-elevated">
-              <!--v-if--><span class="truncate">Introduction<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary before:bg-elevated">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Introduction<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/installation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Installation<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/installation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Installation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/theming" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Theming<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/theming" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Theming<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/structure" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Structure<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/structure" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Structure<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/content" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Content<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/content" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Content<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
       </div>
     </li>
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Components<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/components/content-navigation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentNavigation<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-navigation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentNavigation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-search" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSearch<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-search" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSearch<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-surround" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSurround<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-surround" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSurround<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-toc" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentToc<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-toc" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentToc<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
@@ -373,58 +373,58 @@ exports[`ContentNavigation > renders with item-leading slot correctly 1`] = `
 `;
 
 exports[`ContentNavigation > renders with item-trailing slot correctly 1`] = `
-"<nav>
+"<nav data-slot="root">
   <ul class="isolate -mx-2.5 -mt-1.5">
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Getting Started<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">New</span>
-        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Getting Started<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">New</span>
+        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/getting-started" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary before:bg-elevated">
-              <!--v-if--><span class="truncate">Introduction<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary before:bg-elevated">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Introduction<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/installation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Installation<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/installation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Installation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/theming" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Theming<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/theming" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Theming<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/structure" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Structure<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/structure" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Structure<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/content" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Content<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/content" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Content<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
       </div>
     </li>
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Components<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/components/content-navigation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentNavigation<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-navigation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentNavigation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-search" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSearch<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-search" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSearch<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-surround" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSurround<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-surround" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSurround<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-toc" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentToc<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-toc" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentToc<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
@@ -435,58 +435,58 @@ exports[`ContentNavigation > renders with item-trailing slot correctly 1`] = `
 `;
 
 exports[`ContentNavigation > renders with navigation correctly 1`] = `
-"<nav>
+"<nav data-slot="root">
   <ul class="isolate -mx-2.5 -mt-1.5">
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Getting Started<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">New</span>
-        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Getting Started<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">New</span>
+        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/getting-started" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary before:bg-elevated">
-              <!--v-if--><span class="truncate">Introduction<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary before:bg-elevated">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Introduction<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/installation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Installation<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/installation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Installation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/theming" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Theming<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/theming" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Theming<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/structure" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Structure<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/structure" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Structure<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/content" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Content<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/content" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Content<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
       </div>
     </li>
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Components<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/components/content-navigation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentNavigation<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-navigation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentNavigation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-search" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSearch<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-search" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSearch<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-surround" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSurround<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-surround" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSurround<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-toc" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentToc<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-toc" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentToc<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
@@ -497,58 +497,58 @@ exports[`ContentNavigation > renders with navigation correctly 1`] = `
 `;
 
 exports[`ContentNavigation > renders with neutral variant link correctly 1`] = `
-"<nav>
+"<nav data-slot="root">
   <ul class="isolate -mx-2.5 -mt-1.5">
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors font-semibold focus-visible:ring-inverted">
-        <!--v-if--><span class="truncate">Getting Started<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">New</span>
-        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors font-semibold focus-visible:ring-inverted">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Getting Started<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">New</span>
+        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/getting-started" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted font-medium text-highlighted">
-              <!--v-if--><span class="truncate">Introduction<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted font-medium text-highlighted">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Introduction<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/installation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">Installation<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/installation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Installation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/theming" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">Theming<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/theming" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Theming<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/structure" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">Structure<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/structure" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Structure<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/content" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">Content<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/content" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Content<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
       </div>
     </li>
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors font-semibold focus-visible:ring-inverted">
-        <!--v-if--><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors font-semibold focus-visible:ring-inverted">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Components<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/components/content-navigation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">ContentNavigation<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-navigation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentNavigation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-search" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">ContentSearch<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-search" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSearch<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-surround" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">ContentSurround<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-surround" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSurround<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-toc" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">ContentToc<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-toc" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentToc<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
@@ -559,58 +559,58 @@ exports[`ContentNavigation > renders with neutral variant link correctly 1`] = `
 `;
 
 exports[`ContentNavigation > renders with neutral variant link highlight correctly 1`] = `
-"<nav>
+"<nav data-slot="root">
   <ul class="isolate -mx-2.5 -mt-1.5">
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors font-semibold focus-visible:ring-inverted">
-        <!--v-if--><span class="truncate">Getting Started<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">New</span>
-        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors font-semibold focus-visible:ring-inverted">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Getting Started<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">New</span>
+        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/getting-started" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted font-medium after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors text-highlighted after:bg-inverted">
-              <!--v-if--><span class="truncate">Introduction<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted font-medium after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors text-highlighted after:bg-inverted">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Introduction<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/installation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">Installation<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/installation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Installation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/theming" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">Theming<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/theming" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Theming<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/structure" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">Structure<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/structure" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Structure<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/content" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">Content<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/content" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Content<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
       </div>
     </li>
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors font-semibold focus-visible:ring-inverted">
-        <!--v-if--><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors font-semibold focus-visible:ring-inverted">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Components<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/components/content-navigation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">ContentNavigation<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-navigation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentNavigation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-search" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">ContentSearch<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-search" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSearch<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-surround" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">ContentSurround<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-surround" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSurround<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-toc" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">ContentToc<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-toc" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentToc<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
@@ -621,58 +621,58 @@ exports[`ContentNavigation > renders with neutral variant link highlight correct
 `;
 
 exports[`ContentNavigation > renders with neutral variant link highlight neutral correctly 1`] = `
-"<nav>
+"<nav data-slot="root">
   <ul class="isolate -mx-2.5 -mt-1.5">
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors font-semibold focus-visible:ring-inverted">
-        <!--v-if--><span class="truncate">Getting Started<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">New</span>
-        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors font-semibold focus-visible:ring-inverted">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Getting Started<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">New</span>
+        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/getting-started" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted font-medium after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors text-highlighted after:bg-inverted">
-              <!--v-if--><span class="truncate">Introduction<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted font-medium after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors text-highlighted after:bg-inverted">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Introduction<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/installation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">Installation<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/installation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Installation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/theming" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">Theming<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/theming" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Theming<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/structure" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">Structure<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/structure" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Structure<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/content" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">Content<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/content" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Content<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
       </div>
     </li>
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors font-semibold focus-visible:ring-inverted">
-        <!--v-if--><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors font-semibold focus-visible:ring-inverted">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Components<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/components/content-navigation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">ContentNavigation<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-navigation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentNavigation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-search" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">ContentSearch<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-search" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSearch<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-surround" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">ContentSurround<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-surround" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSurround<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-toc" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">ContentToc<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-toc" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentToc<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
@@ -683,58 +683,58 @@ exports[`ContentNavigation > renders with neutral variant link highlight neutral
 `;
 
 exports[`ContentNavigation > renders with neutral variant pill correctly 1`] = `
-"<nav>
+"<nav data-slot="root">
   <ul class="isolate -mx-2.5 -mt-1.5">
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-inverted">
-        <!--v-if--><span class="truncate">Getting Started<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">New</span>
-        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-inverted">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Getting Started<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">New</span>
+        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/getting-started" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted font-medium text-highlighted before:bg-elevated">
-              <!--v-if--><span class="truncate">Introduction<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted font-medium text-highlighted before:bg-elevated">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Introduction<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/installation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Installation<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/installation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Installation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/theming" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Theming<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/theming" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Theming<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/structure" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Structure<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/structure" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Structure<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/content" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Content<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/content" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Content<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
       </div>
     </li>
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-inverted">
-        <!--v-if--><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-inverted">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Components<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/components/content-navigation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentNavigation<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-navigation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentNavigation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-search" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSearch<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-search" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSearch<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-surround" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSurround<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-surround" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSurround<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-toc" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentToc<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-toc" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentToc<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
@@ -745,58 +745,58 @@ exports[`ContentNavigation > renders with neutral variant pill correctly 1`] = `
 `;
 
 exports[`ContentNavigation > renders with neutral variant pill highlight correctly 1`] = `
-"<nav>
+"<nav data-slot="root">
   <ul class="isolate -mx-2.5 -mt-1.5">
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-inverted">
-        <!--v-if--><span class="truncate">Getting Started<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">New</span>
-        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-inverted">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Getting Started<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">New</span>
+        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/getting-started" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted font-medium after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors text-highlighted hover:before:bg-elevated/50 before:transition-colors after:bg-inverted">
-              <!--v-if--><span class="truncate">Introduction<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted font-medium after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors text-highlighted hover:before:bg-elevated/50 before:transition-colors after:bg-inverted">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Introduction<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/installation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Installation<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/installation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Installation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/theming" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Theming<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/theming" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Theming<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/structure" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Structure<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/structure" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Structure<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/content" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Content<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/content" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Content<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
       </div>
     </li>
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-inverted">
-        <!--v-if--><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-inverted">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Components<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/components/content-navigation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentNavigation<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-navigation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentNavigation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-search" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSearch<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-search" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSearch<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-surround" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSurround<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-surround" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSurround<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-toc" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentToc<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-toc" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentToc<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
@@ -807,58 +807,58 @@ exports[`ContentNavigation > renders with neutral variant pill highlight correct
 `;
 
 exports[`ContentNavigation > renders with neutral variant pill highlight neutral correctly 1`] = `
-"<nav>
+"<nav data-slot="root">
   <ul class="isolate -mx-2.5 -mt-1.5">
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-inverted">
-        <!--v-if--><span class="truncate">Getting Started<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">New</span>
-        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-inverted">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Getting Started<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">New</span>
+        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/getting-started" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted font-medium after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors text-highlighted hover:before:bg-elevated/50 before:transition-colors after:bg-inverted">
-              <!--v-if--><span class="truncate">Introduction<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted font-medium after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors text-highlighted hover:before:bg-elevated/50 before:transition-colors after:bg-inverted">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Introduction<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/installation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Installation<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/installation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Installation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/theming" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Theming<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/theming" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Theming<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/structure" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Structure<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/structure" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Structure<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/content" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Content<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/content" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Content<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
       </div>
     </li>
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-inverted">
-        <!--v-if--><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-inverted">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Components<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/components/content-navigation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentNavigation<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-navigation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentNavigation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-search" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSearch<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-search" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSearch<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-surround" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSurround<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-surround" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSurround<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-toc" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentToc<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-toc" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentToc<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
@@ -869,58 +869,58 @@ exports[`ContentNavigation > renders with neutral variant pill highlight neutral
 `;
 
 exports[`ContentNavigation > renders with primary variant link correctly 1`] = `
-"<nav>
+"<nav data-slot="root">
   <ul class="isolate -mx-2.5 -mt-1.5">
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Getting Started<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">New</span>
-        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Getting Started<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">New</span>
+        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/getting-started" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary">
-              <!--v-if--><span class="truncate">Introduction<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Introduction<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/installation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">Installation<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/installation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Installation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/theming" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">Theming<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/theming" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Theming<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/structure" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">Structure<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/structure" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Structure<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/content" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">Content<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/content" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Content<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
       </div>
     </li>
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Components<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/components/content-navigation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">ContentNavigation<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-navigation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentNavigation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-search" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">ContentSearch<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-search" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSearch<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-surround" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">ContentSurround<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-surround" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSurround<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-toc" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">ContentToc<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-toc" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentToc<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
@@ -931,58 +931,58 @@ exports[`ContentNavigation > renders with primary variant link correctly 1`] = `
 `;
 
 exports[`ContentNavigation > renders with primary variant link highlight correctly 1`] = `
-"<nav>
+"<nav data-slot="root">
   <ul class="isolate -mx-2.5 -mt-1.5">
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Getting Started<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">New</span>
-        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Getting Started<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">New</span>
+        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/getting-started" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors text-primary after:bg-primary">
-              <!--v-if--><span class="truncate">Introduction<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors text-primary after:bg-primary">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Introduction<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/installation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">Installation<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/installation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Installation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/theming" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">Theming<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/theming" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Theming<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/structure" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">Structure<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/structure" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Structure<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/content" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">Content<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/content" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Content<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
       </div>
     </li>
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted data-[state=open]:text-highlighted transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Components<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/components/content-navigation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">ContentNavigation<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-navigation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentNavigation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-search" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">ContentSearch<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-search" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSearch<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-surround" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">ContentSurround<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-surround" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSurround<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-toc" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
-              <!--v-if--><span class="truncate">ContentToc<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-toc" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted data-[state=open]:text-highlighted transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentToc<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
@@ -993,58 +993,58 @@ exports[`ContentNavigation > renders with primary variant link highlight correct
 `;
 
 exports[`ContentNavigation > renders with primary variant pill correctly 1`] = `
-"<nav>
+"<nav data-slot="root">
   <ul class="isolate -mx-2.5 -mt-1.5">
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Getting Started<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">New</span>
-        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Getting Started<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">New</span>
+        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/getting-started" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary before:bg-elevated">
-              <!--v-if--><span class="truncate">Introduction<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary before:bg-elevated">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Introduction<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/installation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Installation<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/installation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Installation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/theming" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Theming<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/theming" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Theming<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/structure" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Structure<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/structure" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Structure<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/content" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Content<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/content" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Content<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
       </div>
     </li>
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Components<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/components/content-navigation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentNavigation<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-navigation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentNavigation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-search" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSearch<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-search" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSearch<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-surround" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSurround<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-surround" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSurround<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-toc" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentToc<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-toc" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentToc<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
@@ -1055,58 +1055,58 @@ exports[`ContentNavigation > renders with primary variant pill correctly 1`] = `
 `;
 
 exports[`ContentNavigation > renders with primary variant pill highlight correctly 1`] = `
-"<nav>
+"<nav data-slot="root">
   <ul class="isolate -mx-2.5 -mt-1.5">
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Getting Started<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">New</span>
-        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Getting Started<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">New</span>
+        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/getting-started" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors text-primary hover:before:bg-elevated/50 before:transition-colors after:bg-primary">
-              <!--v-if--><span class="truncate">Introduction<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors text-primary hover:before:bg-elevated/50 before:transition-colors after:bg-primary">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Introduction<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/installation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Installation<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/installation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Installation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/theming" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Theming<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/theming" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Theming<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/structure" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Structure<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/structure" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Structure<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/content" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Content<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/content" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Content<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
       </div>
     </li>
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Components<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/components/content-navigation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentNavigation<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-navigation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentNavigation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-search" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSearch<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-search" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSearch<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-surround" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSurround<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-surround" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSurround<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-toc" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentToc<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-toc" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full after:transition-colors hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentToc<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
@@ -1117,58 +1117,58 @@ exports[`ContentNavigation > renders with primary variant pill highlight correct
 `;
 
 exports[`ContentNavigation > renders with trailingIcon correctly 1`] = `
-"<nav>
+"<nav data-slot="root">
   <ul class="isolate -mx-2.5 -mt-1.5">
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Getting Started<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">New</span>
-        <!--v-if--></span><span class="iconify i-lucide:plus size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Getting Started<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">New</span>
+        <!--v-if--></span><span class="iconify i-lucide:plus size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/getting-started" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary before:bg-elevated">
-              <!--v-if--><span class="truncate">Introduction<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary before:bg-elevated">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Introduction<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/installation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Installation<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/installation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Installation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/theming" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Theming<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/theming" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Theming<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/structure" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Structure<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/structure" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Structure<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/content" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Content<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/content" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Content<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
       </div>
     </li>
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:plus size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Components<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:plus size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/components/content-navigation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentNavigation<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-navigation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentNavigation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-search" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSearch<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-search" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSearch<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-surround" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSurround<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-surround" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSurround<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-toc" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentToc<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-toc" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentToc<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
@@ -1179,58 +1179,58 @@ exports[`ContentNavigation > renders with trailingIcon correctly 1`] = `
 `;
 
 exports[`ContentNavigation > renders with ui correctly 1`] = `
-"<nav>
+"<nav data-slot="root">
   <ul class="isolate -mx-2.5 -mt-1.5">
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Getting Started<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">New</span>
-        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Getting Started<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">New</span>
+        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/getting-started" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary before:bg-elevated">
-              <!--v-if--><span class="truncate">Introduction<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary before:bg-elevated">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Introduction<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/installation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Installation<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/installation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Installation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/theming" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Theming<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/theming" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Theming<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/structure" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Structure<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/structure" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Structure<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/content" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Content<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/content" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Content<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
       </div>
     </li>
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Components<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/components/content-navigation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentNavigation<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-navigation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentNavigation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-search" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSearch<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-search" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSearch<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-surround" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSurround<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-surround" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSurround<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-toc" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentToc<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-toc" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentToc<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
@@ -1241,58 +1241,58 @@ exports[`ContentNavigation > renders with ui correctly 1`] = `
 `;
 
 exports[`ContentNavigation > renders without collapsible correctly 1`] = `
-"<nav>
+"<nav data-slot="root">
   <ul class="isolate -mx-2.5 -mt-1.5">
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Getting Started<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">New</span>
-        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Getting Started<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">New</span>
+        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/getting-started" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary before:bg-elevated">
-              <!--v-if--><span class="truncate">Introduction<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary before:bg-elevated">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Introduction<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/installation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Installation<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/installation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Installation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/theming" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Theming<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/theming" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Theming<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/structure" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Structure<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/structure" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Structure<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/content" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Content<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/content" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Content<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
       </div>
     </li>
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Components<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/components/content-navigation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentNavigation<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-navigation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentNavigation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-search" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSearch<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-search" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSearch<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-surround" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSurround<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-surround" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSurround<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-toc" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentToc<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-toc" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentToc<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
@@ -1303,58 +1303,58 @@ exports[`ContentNavigation > renders without collapsible correctly 1`] = `
 `;
 
 exports[`ContentNavigation > renders without defaultOpen correctly 1`] = `
-"<nav>
+"<nav data-slot="root">
   <ul class="isolate -mx-2.5 -mt-1.5">
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Getting Started<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">New</span>
-        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Getting Started<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">New</span>
+        <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/getting-started" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary before:bg-elevated">
-              <!--v-if--><span class="truncate">Introduction<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary font-medium text-primary before:bg-elevated">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Introduction<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/installation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Installation<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/installation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Installation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/theming" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Theming<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/theming" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Theming<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/structure" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Structure<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/structure" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Structure<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/getting-started/content" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">Content<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/getting-started/content" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">Content<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
       </div>
     </li>
-    <li data-state="open" data-orientation="vertical" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
-        <!--v-if--><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true"></span></span>
+    <li data-state="open" data-orientation="vertical" data-slot="itemWithChildren" class="flex flex-col data-[state=open]:mb-1.5"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors font-semibold focus-visible:ring-primary">
+        <!--v-if--><span data-slot="linkTitle" class="truncate">Components<!--v-if--></span><span data-slot="linkTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180" aria-hidden="true" data-slot="linkTrailingIcon"></span></span>
       </button>
-      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
+      <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3">
         <!---->
-        <ul class="ms-5 border-s border-default">
-          <li class="ps-1.5 -ms-px"><a href="/components/content-navigation" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentNavigation<!--v-if--></span>
+        <ul data-slot="root" class="ms-5 border-s border-default">
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-navigation" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentNavigation<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-search" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSearch<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-search" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSearch<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-surround" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentSurround<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-surround" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentSurround<!--v-if--></span>
               <!--v-if-->
             </a></li>
-          <li class="ps-1.5 -ms-px"><a href="/components/content-toc" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
-              <!--v-if--><span class="truncate">ContentToc<!--v-if--></span>
+          <li data-slot="item" class="ps-1.5 -ms-px"><a href="/components/content-toc" data-slot="link" class="group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary text-muted hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted transition-colors before:transition-colors">
+              <!--v-if--><span data-slot="linkTitle" class="truncate">ContentToc<!--v-if--></span>
               <!--v-if-->
             </a></li>
         </ul>
diff --git a/test/components/content/__snapshots__/ContentSearch.spec.ts.snap b/test/components/content/__snapshots__/ContentSearch.spec.ts.snap
index 04a8150e19..2147bf0982 100644
--- a/test/components/content/__snapshots__/ContentSearch.spec.ts.snap
+++ b/test/components/content/__snapshots__/ContentSearch.spec.ts.snap
@@ -6,46 +6,46 @@ exports[`ContentSearch > renders with class correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:h-[28rem] sm:max-w-5xl" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:h-[28rem] sm:max-w-5xl" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
-  <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-    <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+  <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+    <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
-    <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" class="p-1 isolate">
-          <div id="reka-listbox-group-v-0-0-2" class="p-1.5 text-xs font-semibold text-highlighted">Links</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-play shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Docs</span>
+    <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" data-slot="group" class="p-1 isolate">
+          <div id="reka-listbox-group-v-0-0-2" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Links</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-play shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Docs</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </a><a href="/components" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Components</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </a><a href="/components" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Components</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </a><a href="/templates" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Templates</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </a><a href="/templates" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Templates</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </a><a href="/showcase" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:presentation shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Showcase</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </a><a href="/showcase" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:presentation shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Showcase</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
           </a>
         </div>
-        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-7" class="p-1 isolate">
-          <div id="reka-listbox-group-v-0-0-7" class="p-1.5 text-xs font-semibold text-highlighted">Getting Started</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:house shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Introduction</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</span></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-7" data-slot="group" class="p-1 isolate">
+          <div id="reka-listbox-group-v-0-0-7" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Getting Started</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:house shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Introduction</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</span></span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
           </a>
         </div>
-        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-          <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
+        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+          <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-11" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-11" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-12" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-12" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
           </button>
         </div>
       </div>
@@ -66,46 +66,46 @@ exports[`ContentSearch > renders with fullscreen correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 fixed" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 fixed" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
-  <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-    <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+  <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+    <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
-    <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" class="p-1 isolate">
-          <div id="reka-listbox-group-v-0-0-2" class="p-1.5 text-xs font-semibold text-highlighted">Links</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-play shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Docs</span>
+    <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" data-slot="group" class="p-1 isolate">
+          <div id="reka-listbox-group-v-0-0-2" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Links</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-play shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Docs</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </a><a href="/components" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Components</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </a><a href="/components" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Components</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </a><a href="/templates" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Templates</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </a><a href="/templates" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Templates</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </a><a href="/showcase" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:presentation shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Showcase</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </a><a href="/showcase" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:presentation shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Showcase</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
           </a>
         </div>
-        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-7" class="p-1 isolate">
-          <div id="reka-listbox-group-v-0-0-7" class="p-1.5 text-xs font-semibold text-highlighted">Getting Started</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:house shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Introduction</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</span></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-7" data-slot="group" class="p-1 isolate">
+          <div id="reka-listbox-group-v-0-0-7" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Getting Started</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:house shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Introduction</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</span></span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
           </a>
         </div>
-        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-          <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
+        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+          <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-11" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-11" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-12" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-12" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
           </button>
         </div>
       </div>
@@ -126,46 +126,46 @@ exports[`ContentSearch > renders with icon correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
-  <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-    <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:home shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+  <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+    <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:home shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
-    <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" class="p-1 isolate">
-          <div id="reka-listbox-group-v-0-0-2" class="p-1.5 text-xs font-semibold text-highlighted">Links</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-play shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Docs</span>
+    <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" data-slot="group" class="p-1 isolate">
+          <div id="reka-listbox-group-v-0-0-2" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Links</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-play shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Docs</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </a><a href="/components" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Components</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </a><a href="/components" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Components</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </a><a href="/templates" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Templates</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </a><a href="/templates" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Templates</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </a><a href="/showcase" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:presentation shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Showcase</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </a><a href="/showcase" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:presentation shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Showcase</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
           </a>
         </div>
-        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-7" class="p-1 isolate">
-          <div id="reka-listbox-group-v-0-0-7" class="p-1.5 text-xs font-semibold text-highlighted">Getting Started</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:house shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Introduction</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</span></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-7" data-slot="group" class="p-1 isolate">
+          <div id="reka-listbox-group-v-0-0-7" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Getting Started</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:house shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Introduction</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</span></span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
           </a>
         </div>
-        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-          <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
+        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+          <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-11" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-11" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-12" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-12" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
           </button>
         </div>
       </div>
@@ -186,46 +186,46 @@ exports[`ContentSearch > renders with links correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
-  <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-    <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+  <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+    <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
-    <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" class="p-1 isolate">
-          <div id="reka-listbox-group-v-0-0-2" class="p-1.5 text-xs font-semibold text-highlighted">Links</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-play shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Docs</span>
+    <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" data-slot="group" class="p-1 isolate">
+          <div id="reka-listbox-group-v-0-0-2" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Links</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-play shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Docs</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </a><a href="/components" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Components</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </a><a href="/components" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Components</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </a><a href="/templates" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Templates</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </a><a href="/templates" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Templates</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </a><a href="/showcase" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:presentation shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Showcase</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </a><a href="/showcase" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:presentation shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Showcase</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
           </a>
         </div>
-        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-7" class="p-1 isolate">
-          <div id="reka-listbox-group-v-0-0-7" class="p-1.5 text-xs font-semibold text-highlighted">Getting Started</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:house shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Introduction</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</span></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-7" data-slot="group" class="p-1 isolate">
+          <div id="reka-listbox-group-v-0-0-7" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Getting Started</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:house shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Introduction</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</span></span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
           </a>
         </div>
-        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-          <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
+        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+          <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-11" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-11" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-12" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-12" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
           </button>
         </div>
       </div>
@@ -246,46 +246,46 @@ exports[`ContentSearch > renders with loading correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
-  <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-    <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+  <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+    <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
-    <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" class="p-1 isolate">
-          <div id="reka-listbox-group-v-0-0-2" class="p-1.5 text-xs font-semibold text-highlighted">Links</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-play shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Docs</span>
+    <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" data-slot="group" class="p-1 isolate">
+          <div id="reka-listbox-group-v-0-0-2" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Links</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-play shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Docs</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </a><a href="/components" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Components</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </a><a href="/components" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Components</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </a><a href="/templates" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Templates</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </a><a href="/templates" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Templates</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </a><a href="/showcase" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:presentation shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Showcase</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </a><a href="/showcase" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:presentation shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Showcase</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
           </a>
         </div>
-        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-7" class="p-1 isolate">
-          <div id="reka-listbox-group-v-0-0-7" class="p-1.5 text-xs font-semibold text-highlighted">Getting Started</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:house shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Introduction</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</span></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-7" data-slot="group" class="p-1 isolate">
+          <div id="reka-listbox-group-v-0-0-7" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Getting Started</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:house shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Introduction</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</span></span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
           </a>
         </div>
-        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-          <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
+        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+          <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-11" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-11" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-12" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-12" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
           </button>
         </div>
       </div>
@@ -306,46 +306,46 @@ exports[`ContentSearch > renders with loadingIcon correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
-  <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-    <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loading shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+  <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+    <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loading shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
-    <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" class="p-1 isolate">
-          <div id="reka-listbox-group-v-0-0-2" class="p-1.5 text-xs font-semibold text-highlighted">Links</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-play shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Docs</span>
+    <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" data-slot="group" class="p-1 isolate">
+          <div id="reka-listbox-group-v-0-0-2" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Links</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-play shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Docs</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </a><a href="/components" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Components</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </a><a href="/components" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Components</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </a><a href="/templates" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Templates</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </a><a href="/templates" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Templates</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </a><a href="/showcase" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:presentation shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Showcase</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </a><a href="/showcase" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:presentation shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Showcase</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
           </a>
         </div>
-        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-7" class="p-1 isolate">
-          <div id="reka-listbox-group-v-0-0-7" class="p-1.5 text-xs font-semibold text-highlighted">Getting Started</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:house shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Introduction</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</span></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-7" data-slot="group" class="p-1 isolate">
+          <div id="reka-listbox-group-v-0-0-7" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Getting Started</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:house shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Introduction</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</span></span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
           </a>
         </div>
-        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-          <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
+        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+          <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-11" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-11" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-12" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-12" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
           </button>
         </div>
       </div>
@@ -366,46 +366,46 @@ exports[`ContentSearch > renders with placeholder correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
-  <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-    <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Search" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+  <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+    <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Search" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
-    <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" class="p-1 isolate">
-          <div id="reka-listbox-group-v-0-0-2" class="p-1.5 text-xs font-semibold text-highlighted">Links</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-play shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Docs</span>
+    <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" data-slot="group" class="p-1 isolate">
+          <div id="reka-listbox-group-v-0-0-2" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Links</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-play shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Docs</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </a><a href="/components" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Components</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </a><a href="/components" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Components</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </a><a href="/templates" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Templates</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </a><a href="/templates" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Templates</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </a><a href="/showcase" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:presentation shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Showcase</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </a><a href="/showcase" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:presentation shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Showcase</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
           </a>
         </div>
-        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-7" class="p-1 isolate">
-          <div id="reka-listbox-group-v-0-0-7" class="p-1.5 text-xs font-semibold text-highlighted">Getting Started</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:house shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Introduction</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</span></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-7" data-slot="group" class="p-1 isolate">
+          <div id="reka-listbox-group-v-0-0-7" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Getting Started</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:house shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Introduction</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</span></span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
           </a>
         </div>
-        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-          <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
+        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+          <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-11" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-11" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-12" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-12" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
           </button>
         </div>
       </div>
@@ -426,46 +426,46 @@ exports[`ContentSearch > renders with ui correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
-  <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-    <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-lg"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+  <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+    <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-lg"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
-    <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" class="p-1 isolate">
-          <div id="reka-listbox-group-v-0-0-2" class="p-1.5 text-xs font-semibold text-highlighted">Links</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-play shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Docs</span>
+    <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" data-slot="group" class="p-1 isolate">
+          <div id="reka-listbox-group-v-0-0-2" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Links</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-play shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Docs</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </a><a href="/components" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Components</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </a><a href="/components" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Components</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </a><a href="/templates" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Templates</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </a><a href="/templates" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Templates</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </a><a href="/showcase" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:presentation shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Showcase</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </a><a href="/showcase" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:presentation shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Showcase</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
           </a>
         </div>
-        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-7" class="p-1 isolate">
-          <div id="reka-listbox-group-v-0-0-7" class="p-1.5 text-xs font-semibold text-highlighted">Getting Started</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:house shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Introduction</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</span></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-7" data-slot="group" class="p-1 isolate">
+          <div id="reka-listbox-group-v-0-0-7" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Getting Started</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:house shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Introduction</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</span></span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
           </a>
         </div>
-        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
-          <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
+        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" data-slot="group" class="p-1 isolate">
+          <div id="reka-listbox-group-v-0-0-9" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Theme</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">System</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-11" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-11" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:sun shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Light</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-12" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-12" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:moon shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Dark</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
           </button>
         </div>
       </div>
@@ -486,34 +486,34 @@ exports[`ContentSearch > renders without colorMode correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
-  <div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
-    <div class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+  <div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+    <div data-slot="root" class="relative inline-flex items-center [&amp;>input]:h-12 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9 pe-9" autocomplete="off" aria-disabled="false" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if--></button></span>
     </div>
-    <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
-      <div role="presentation" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
-        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" class="p-1 isolate">
-          <div id="reka-listbox-group-v-0-0-2" class="p-1.5 text-xs font-semibold text-highlighted">Links</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-play shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Docs</span>
+    <div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+      <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none divide-y divide-default">
+        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-2" data-slot="group" class="p-1 isolate">
+          <div id="reka-listbox-group-v-0-0-2" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Links</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-play shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Docs</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </a><a href="/components" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Components</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </a><a href="/components" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:square-code shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Components</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </a><a href="/templates" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Templates</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </a><a href="/templates" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-5" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:monitor shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Templates</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
-          </a><a href="/showcase" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:presentation shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Showcase</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+          </a><a href="/showcase" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:presentation shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Showcase</span>
             <!--v-if--></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
           </a>
         </div>
-        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-7" class="p-1 isolate">
-          <div id="reka-listbox-group-v-0-0-7" class="p-1.5 text-xs font-semibold text-highlighted">Getting Started</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:house shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="flex-1 flex flex-col text-start min-w-0"><span class="truncate space-x-1 text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Introduction</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</span></span>
-            <!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
+        <div role="group" aria-labelledby="reka-listbox-group-v-0-0-7" data-slot="group" class="p-1 isolate">
+          <div id="reka-listbox-group-v-0-0-7" data-slot="label" class="p-1.5 text-xs font-semibold text-highlighted">Getting Started</div><a href="/getting-started" role="option" tabindex="-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" aria-selected="false" data-state="unchecked" data-slot="item" class="group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:house shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col text-start min-w-0"><span data-slot="itemLabel" class="truncate space-x-1 text-dimmed"><!--v-if--><span data-slot="itemLabelBase" class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Introduction</span><span data-slot="itemLabelSuffix" class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</span></span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!--v-if--></span>
           </a>
         </div>
       </div>
diff --git a/test/components/content/__snapshots__/ContentSearchButton.spec.ts.snap b/test/components/content/__snapshots__/ContentSearchButton.spec.ts.snap
index e89cf32b8d..c2e1844233 100644
--- a/test/components/content/__snapshots__/ContentSearchButton.spec.ts.snap
+++ b/test/components/content/__snapshots__/ContentSearchButton.spec.ts.snap
@@ -1,35 +1,35 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`DashboardSearchButton > renders with class correctly 1`] = `
-"<button type="button" aria-label="Search…" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 w-full"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true"></span>
+"<button type="button" aria-label="Search…" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 w-full"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`DashboardSearchButton > renders with icon correctly 1`] = `
-"<button type="button" aria-label="Search…" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span>
+"<button type="button" aria-label="Search…" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`DashboardSearchButton > renders with kbds correctly 1`] = `
-"<button type="button" aria-label="Search…" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true"></span>
+"<button type="button" aria-label="Search…" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`DashboardSearchButton > renders with label correctly 1`] = `
-"<button type="button" aria-label="Open" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true"></span>
+"<button type="button" aria-label="Open" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`DashboardSearchButton > renders without collapsed correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Search…</span>
-  <div class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></div>
+"<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span><span data-slot="label" class="truncate">Search…</span>
+  <div data-slot="trailing" class="hidden lg:flex items-center gap-0.5 ms-auto"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-elevated">k</kbd></div>
 </button>"
 `;
diff --git a/test/components/content/__snapshots__/ContentSurround.spec.ts.snap b/test/components/content/__snapshots__/ContentSurround.spec.ts.snap
index 49098a9fb1..fcb8034a70 100644
--- a/test/components/content/__snapshots__/ContentSurround.spec.ts.snap
+++ b/test/components/content/__snapshots__/ContentSurround.spec.ts.snap
@@ -1,99 +1,99 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ContentSurround > renders with as correctly 1`] = `
-"<section class="grid grid-cols-1 sm:grid-cols-2 gap-8"><a href="/getting-started" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors">
-    <div class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:arrow-left size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:-translate-x-0.5" aria-hidden="true"></span></div>
-    <p class="font-medium text-[15px] text-highlighted mb-1 truncate">Introduction</p>
-    <p class="text-sm text-muted line-clamp-2">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</p>
-  </a><a href="/getting-started/theme" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors text-right">
-    <div class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:arrow-right size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:translate-x-0.5" aria-hidden="true"></span></div>
-    <p class="font-medium text-[15px] text-highlighted mb-1 truncate">Theme</p>
-    <p class="text-sm text-muted line-clamp-2">Learn how to customize Nuxt UI components using Tailwind CSS v4, CSS variables and the Tailwind Variants API for powerful and flexible theming.</p>
+"<section data-slot="root" class="grid grid-cols-1 sm:grid-cols-2 gap-8"><a href="/getting-started" data-slot="link" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors">
+    <div data-slot="linkLeading" class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:arrow-left size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:-translate-x-0.5" aria-hidden="true" data-slot="linkLeadingIcon"></span></div>
+    <p data-slot="linkTitle" class="font-medium text-[15px] text-highlighted mb-1 truncate">Introduction</p>
+    <p data-slot="linkDescription" class="text-sm text-muted line-clamp-2">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</p>
+  </a><a href="/getting-started/theme" data-slot="link" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors text-right">
+    <div data-slot="linkLeading" class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:arrow-right size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:translate-x-0.5" aria-hidden="true" data-slot="linkLeadingIcon"></span></div>
+    <p data-slot="linkTitle" class="font-medium text-[15px] text-highlighted mb-1 truncate">Theme</p>
+    <p data-slot="linkDescription" class="text-sm text-muted line-clamp-2">Learn how to customize Nuxt UI components using Tailwind CSS v4, CSS variables and the Tailwind Variants API for powerful and flexible theming.</p>
   </a></section>"
 `;
 
 exports[`ContentSurround > renders with class correctly 1`] = `
-"<div class="grid grid-cols-1 sm:grid-cols-2 gap-12"><a href="/getting-started" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors">
-    <div class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:arrow-left size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:-translate-x-0.5" aria-hidden="true"></span></div>
-    <p class="font-medium text-[15px] text-highlighted mb-1 truncate">Introduction</p>
-    <p class="text-sm text-muted line-clamp-2">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</p>
-  </a><a href="/getting-started/theme" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors text-right">
-    <div class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:arrow-right size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:translate-x-0.5" aria-hidden="true"></span></div>
-    <p class="font-medium text-[15px] text-highlighted mb-1 truncate">Theme</p>
-    <p class="text-sm text-muted line-clamp-2">Learn how to customize Nuxt UI components using Tailwind CSS v4, CSS variables and the Tailwind Variants API for powerful and flexible theming.</p>
+"<div data-slot="root" class="grid grid-cols-1 sm:grid-cols-2 gap-12"><a href="/getting-started" data-slot="link" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors">
+    <div data-slot="linkLeading" class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:arrow-left size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:-translate-x-0.5" aria-hidden="true" data-slot="linkLeadingIcon"></span></div>
+    <p data-slot="linkTitle" class="font-medium text-[15px] text-highlighted mb-1 truncate">Introduction</p>
+    <p data-slot="linkDescription" class="text-sm text-muted line-clamp-2">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</p>
+  </a><a href="/getting-started/theme" data-slot="link" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors text-right">
+    <div data-slot="linkLeading" class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:arrow-right size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:translate-x-0.5" aria-hidden="true" data-slot="linkLeadingIcon"></span></div>
+    <p data-slot="linkTitle" class="font-medium text-[15px] text-highlighted mb-1 truncate">Theme</p>
+    <p data-slot="linkDescription" class="text-sm text-muted line-clamp-2">Learn how to customize Nuxt UI components using Tailwind CSS v4, CSS variables and the Tailwind Variants API for powerful and flexible theming.</p>
   </a></div>"
 `;
 
-exports[`ContentSurround > renders with link slot correctly 1`] = `"<div class="grid grid-cols-1 sm:grid-cols-2 gap-8"><a href="/getting-started" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors">Link slot</a><a href="/getting-started/theme" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors text-right">Link slot</a></div>"`;
+exports[`ContentSurround > renders with link slot correctly 1`] = `"<div data-slot="root" class="grid grid-cols-1 sm:grid-cols-2 gap-8"><a href="/getting-started" data-slot="link" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors">Link slot</a><a href="/getting-started/theme" data-slot="link" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors text-right">Link slot</a></div>"`;
 
 exports[`ContentSurround > renders with link-leading slot correctly 1`] = `
-"<div class="grid grid-cols-1 sm:grid-cols-2 gap-8"><a href="/getting-started" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors">
-    <div class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition">Link leading slot</div>
-    <p class="font-medium text-[15px] text-highlighted mb-1 truncate">Introduction</p>
-    <p class="text-sm text-muted line-clamp-2">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</p>
-  </a><a href="/getting-started/theme" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors text-right">
-    <div class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition">Link leading slot</div>
-    <p class="font-medium text-[15px] text-highlighted mb-1 truncate">Theme</p>
-    <p class="text-sm text-muted line-clamp-2">Learn how to customize Nuxt UI components using Tailwind CSS v4, CSS variables and the Tailwind Variants API for powerful and flexible theming.</p>
+"<div data-slot="root" class="grid grid-cols-1 sm:grid-cols-2 gap-8"><a href="/getting-started" data-slot="link" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors">
+    <div data-slot="linkLeading" class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition">Link leading slot</div>
+    <p data-slot="linkTitle" class="font-medium text-[15px] text-highlighted mb-1 truncate">Introduction</p>
+    <p data-slot="linkDescription" class="text-sm text-muted line-clamp-2">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</p>
+  </a><a href="/getting-started/theme" data-slot="link" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors text-right">
+    <div data-slot="linkLeading" class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition">Link leading slot</div>
+    <p data-slot="linkTitle" class="font-medium text-[15px] text-highlighted mb-1 truncate">Theme</p>
+    <p data-slot="linkDescription" class="text-sm text-muted line-clamp-2">Learn how to customize Nuxt UI components using Tailwind CSS v4, CSS variables and the Tailwind Variants API for powerful and flexible theming.</p>
   </a></div>"
 `;
 
 exports[`ContentSurround > renders with link-title slot correctly 1`] = `
-"<div class="grid grid-cols-1 sm:grid-cols-2 gap-8"><a href="/getting-started" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors">
-    <div class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:arrow-left size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:-translate-x-0.5" aria-hidden="true"></span></div>
-    <p class="font-medium text-[15px] text-highlighted mb-1 truncate">Link title slot</p>
-    <p class="text-sm text-muted line-clamp-2">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</p>
-  </a><a href="/getting-started/theme" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors text-right">
-    <div class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:arrow-right size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:translate-x-0.5" aria-hidden="true"></span></div>
-    <p class="font-medium text-[15px] text-highlighted mb-1 truncate">Link title slot</p>
-    <p class="text-sm text-muted line-clamp-2">Learn how to customize Nuxt UI components using Tailwind CSS v4, CSS variables and the Tailwind Variants API for powerful and flexible theming.</p>
+"<div data-slot="root" class="grid grid-cols-1 sm:grid-cols-2 gap-8"><a href="/getting-started" data-slot="link" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors">
+    <div data-slot="linkLeading" class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:arrow-left size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:-translate-x-0.5" aria-hidden="true" data-slot="linkLeadingIcon"></span></div>
+    <p data-slot="linkTitle" class="font-medium text-[15px] text-highlighted mb-1 truncate">Link title slot</p>
+    <p data-slot="linkDescription" class="text-sm text-muted line-clamp-2">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</p>
+  </a><a href="/getting-started/theme" data-slot="link" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors text-right">
+    <div data-slot="linkLeading" class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:arrow-right size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:translate-x-0.5" aria-hidden="true" data-slot="linkLeadingIcon"></span></div>
+    <p data-slot="linkTitle" class="font-medium text-[15px] text-highlighted mb-1 truncate">Link title slot</p>
+    <p data-slot="linkDescription" class="text-sm text-muted line-clamp-2">Learn how to customize Nuxt UI components using Tailwind CSS v4, CSS variables and the Tailwind Variants API for powerful and flexible theming.</p>
   </a></div>"
 `;
 
 exports[`ContentSurround > renders with nextIcon correctly 1`] = `
-"<div class="grid grid-cols-1 sm:grid-cols-2 gap-8"><a href="/getting-started" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors">
-    <div class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:arrow-left size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:-translate-x-0.5" aria-hidden="true"></span></div>
-    <p class="font-medium text-[15px] text-highlighted mb-1 truncate">Introduction</p>
-    <p class="text-sm text-muted line-clamp-2">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</p>
-  </a><a href="/getting-started/theme" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors text-right">
-    <div class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:chevron-right size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:translate-x-0.5" aria-hidden="true"></span></div>
-    <p class="font-medium text-[15px] text-highlighted mb-1 truncate">Theme</p>
-    <p class="text-sm text-muted line-clamp-2">Learn how to customize Nuxt UI components using Tailwind CSS v4, CSS variables and the Tailwind Variants API for powerful and flexible theming.</p>
+"<div data-slot="root" class="grid grid-cols-1 sm:grid-cols-2 gap-8"><a href="/getting-started" data-slot="link" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors">
+    <div data-slot="linkLeading" class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:arrow-left size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:-translate-x-0.5" aria-hidden="true" data-slot="linkLeadingIcon"></span></div>
+    <p data-slot="linkTitle" class="font-medium text-[15px] text-highlighted mb-1 truncate">Introduction</p>
+    <p data-slot="linkDescription" class="text-sm text-muted line-clamp-2">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</p>
+  </a><a href="/getting-started/theme" data-slot="link" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors text-right">
+    <div data-slot="linkLeading" class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:chevron-right size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:translate-x-0.5" aria-hidden="true" data-slot="linkLeadingIcon"></span></div>
+    <p data-slot="linkTitle" class="font-medium text-[15px] text-highlighted mb-1 truncate">Theme</p>
+    <p data-slot="linkDescription" class="text-sm text-muted line-clamp-2">Learn how to customize Nuxt UI components using Tailwind CSS v4, CSS variables and the Tailwind Variants API for powerful and flexible theming.</p>
   </a></div>"
 `;
 
 exports[`ContentSurround > renders with prevIcon correctly 1`] = `
-"<div class="grid grid-cols-1 sm:grid-cols-2 gap-8"><a href="/getting-started" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors">
-    <div class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:chevron-left size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:-translate-x-0.5" aria-hidden="true"></span></div>
-    <p class="font-medium text-[15px] text-highlighted mb-1 truncate">Introduction</p>
-    <p class="text-sm text-muted line-clamp-2">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</p>
-  </a><a href="/getting-started/theme" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors text-right">
-    <div class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:arrow-right size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:translate-x-0.5" aria-hidden="true"></span></div>
-    <p class="font-medium text-[15px] text-highlighted mb-1 truncate">Theme</p>
-    <p class="text-sm text-muted line-clamp-2">Learn how to customize Nuxt UI components using Tailwind CSS v4, CSS variables and the Tailwind Variants API for powerful and flexible theming.</p>
+"<div data-slot="root" class="grid grid-cols-1 sm:grid-cols-2 gap-8"><a href="/getting-started" data-slot="link" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors">
+    <div data-slot="linkLeading" class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:chevron-left size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:-translate-x-0.5" aria-hidden="true" data-slot="linkLeadingIcon"></span></div>
+    <p data-slot="linkTitle" class="font-medium text-[15px] text-highlighted mb-1 truncate">Introduction</p>
+    <p data-slot="linkDescription" class="text-sm text-muted line-clamp-2">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</p>
+  </a><a href="/getting-started/theme" data-slot="link" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors text-right">
+    <div data-slot="linkLeading" class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:arrow-right size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:translate-x-0.5" aria-hidden="true" data-slot="linkLeadingIcon"></span></div>
+    <p data-slot="linkTitle" class="font-medium text-[15px] text-highlighted mb-1 truncate">Theme</p>
+    <p data-slot="linkDescription" class="text-sm text-muted line-clamp-2">Learn how to customize Nuxt UI components using Tailwind CSS v4, CSS variables and the Tailwind Variants API for powerful and flexible theming.</p>
   </a></div>"
 `;
 
 exports[`ContentSurround > renders with surround correctly 1`] = `
-"<div class="grid grid-cols-1 sm:grid-cols-2 gap-8"><a href="/getting-started" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors">
-    <div class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:arrow-left size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:-translate-x-0.5" aria-hidden="true"></span></div>
-    <p class="font-medium text-[15px] text-highlighted mb-1 truncate">Introduction</p>
-    <p class="text-sm text-muted line-clamp-2">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</p>
-  </a><a href="/getting-started/theme" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors text-right">
-    <div class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:arrow-right size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:translate-x-0.5" aria-hidden="true"></span></div>
-    <p class="font-medium text-[15px] text-highlighted mb-1 truncate">Theme</p>
-    <p class="text-sm text-muted line-clamp-2">Learn how to customize Nuxt UI components using Tailwind CSS v4, CSS variables and the Tailwind Variants API for powerful and flexible theming.</p>
+"<div data-slot="root" class="grid grid-cols-1 sm:grid-cols-2 gap-8"><a href="/getting-started" data-slot="link" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors">
+    <div data-slot="linkLeading" class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:arrow-left size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:-translate-x-0.5" aria-hidden="true" data-slot="linkLeadingIcon"></span></div>
+    <p data-slot="linkTitle" class="font-medium text-[15px] text-highlighted mb-1 truncate">Introduction</p>
+    <p data-slot="linkDescription" class="text-sm text-muted line-clamp-2">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</p>
+  </a><a href="/getting-started/theme" data-slot="link" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors text-right">
+    <div data-slot="linkLeading" class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:arrow-right size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:translate-x-0.5" aria-hidden="true" data-slot="linkLeadingIcon"></span></div>
+    <p data-slot="linkTitle" class="font-medium text-[15px] text-highlighted mb-1 truncate">Theme</p>
+    <p data-slot="linkDescription" class="text-sm text-muted line-clamp-2">Learn how to customize Nuxt UI components using Tailwind CSS v4, CSS variables and the Tailwind Variants API for powerful and flexible theming.</p>
   </a></div>"
 `;
 
 exports[`ContentSurround > renders with ui correctly 1`] = `
-"<div class="grid grid-cols-1 sm:grid-cols-2 gap-8"><a href="/getting-started" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors">
-    <div class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:arrow-left size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:-translate-x-0.5" aria-hidden="true"></span></div>
-    <p class="font-medium text-highlighted mb-1 truncate text-xl">Introduction</p>
-    <p class="text-sm text-muted line-clamp-2">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</p>
-  </a><a href="/getting-started/theme" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors text-right">
-    <div class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:arrow-right size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:translate-x-0.5" aria-hidden="true"></span></div>
-    <p class="font-medium text-highlighted mb-1 truncate text-xl">Theme</p>
-    <p class="text-sm text-muted line-clamp-2">Learn how to customize Nuxt UI components using Tailwind CSS v4, CSS variables and the Tailwind Variants API for powerful and flexible theming.</p>
+"<div data-slot="root" class="grid grid-cols-1 sm:grid-cols-2 gap-8"><a href="/getting-started" data-slot="link" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors">
+    <div data-slot="linkLeading" class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:arrow-left size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:-translate-x-0.5" aria-hidden="true" data-slot="linkLeadingIcon"></span></div>
+    <p data-slot="linkTitle" class="font-medium text-highlighted mb-1 truncate text-xl">Introduction</p>
+    <p data-slot="linkDescription" class="text-sm text-muted line-clamp-2">Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.</p>
+  </a><a href="/getting-started/theme" data-slot="link" class="group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary transition-colors text-right">
+    <div data-slot="linkLeading" class="inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50 transition"><span class="iconify i-lucide:arrow-right size-5 shrink-0 text-highlighted group-hover:text-primary transition-[color,translate] group-active:translate-x-0.5" aria-hidden="true" data-slot="linkLeadingIcon"></span></div>
+    <p data-slot="linkTitle" class="font-medium text-highlighted mb-1 truncate text-xl">Theme</p>
+    <p data-slot="linkDescription" class="text-sm text-muted line-clamp-2">Learn how to customize Nuxt UI components using Tailwind CSS v4, CSS variables and the Tailwind Variants API for powerful and flexible theming.</p>
   </a></div>"
 `;
diff --git a/test/components/content/__snapshots__/ContentToc.spec.ts.snap b/test/components/content/__snapshots__/ContentToc.spec.ts.snap
index 05c5c6a73f..d08b2d0606 100644
--- a/test/components/content/__snapshots__/ContentToc.spec.ts.snap
+++ b/test/components/content/__snapshots__/ContentToc.spec.ts.snap
@@ -2,34 +2,34 @@
 
 exports[`ContentToc > renders with as correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<div data-state="closed" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
-  <div class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
-    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></button>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
+<div data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+  <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
+    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
       <!--v-if-->
     </div>
-    <p class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></p>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
+    <p data-slot="trigger" class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></p>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
       <!--v-if-->
       <ul class="min-w-0">
-        <li class="min-w-0"><a href="#installation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary"><span class="truncate">Installation</span></a>
+        <li class="min-w-0"><a href="#installation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary"><span data-slot="linkText" class="truncate">Installation</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#components" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Components</span></a>
+        <li class="min-w-0"><a href="#components" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Components</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#typography" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Typography</span></a>
+        <li class="min-w-0"><a href="#typography" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Typography</span></a>
           <!--v-if-->
         </li>
-        <li class=""><a href="#utils" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Utils</span></a>
+        <li class=""><a href="#utils" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Utils</span></a>
           <ul class="ms-3">
-            <li class="min-w-0"><a href="#mapcontentnavigation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">mapContentNavigation</span></a>
+            <li class="min-w-0"><a href="#mapcontentnavigation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">mapContentNavigation</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpageheadline" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageHeadline</span></a>
+            <li class="min-w-0"><a href="#findpageheadline" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageHeadline</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpagebreadcrumb" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageBreadcrumb</span></a>
+            <li class="min-w-0"><a href="#findpagebreadcrumb" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageBreadcrumb</span></a>
               <!--v-if-->
             </li>
           </ul>
@@ -43,75 +43,75 @@ exports[`ContentToc > renders with as correctly 1`] = `
 
 exports[`ContentToc > renders with bottom slot correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
-  <div class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
-    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></button>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+  <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
+    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
       <!--v-if-->
     </div>
-    <p class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></p>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
+    <p data-slot="trigger" class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></p>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
       <!--v-if-->
       <ul class="min-w-0">
-        <li class="min-w-0"><a href="#installation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary"><span class="truncate">Installation</span></a>
+        <li class="min-w-0"><a href="#installation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary"><span data-slot="linkText" class="truncate">Installation</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#components" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Components</span></a>
+        <li class="min-w-0"><a href="#components" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Components</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#typography" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Typography</span></a>
+        <li class="min-w-0"><a href="#typography" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Typography</span></a>
           <!--v-if-->
         </li>
-        <li class=""><a href="#utils" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Utils</span></a>
+        <li class=""><a href="#utils" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Utils</span></a>
           <ul class="ms-3">
-            <li class="min-w-0"><a href="#mapcontentnavigation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">mapContentNavigation</span></a>
+            <li class="min-w-0"><a href="#mapcontentnavigation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">mapContentNavigation</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpageheadline" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageHeadline</span></a>
+            <li class="min-w-0"><a href="#findpageheadline" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageHeadline</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpagebreadcrumb" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageBreadcrumb</span></a>
+            <li class="min-w-0"><a href="#findpagebreadcrumb" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageBreadcrumb</span></a>
               <!--v-if-->
             </li>
           </ul>
         </li>
       </ul>
     </div>
-    <div class="hidden lg:flex lg:flex-col gap-6 mt-6">Bottom slot</div>
+    <div data-slot="bottom" class="hidden lg:flex lg:flex-col gap-6 mt-6">Bottom slot</div>
   </div>
 </nav>"
 `;
 
 exports[`ContentToc > renders with class correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))] lg:px-8">
-  <div class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
-    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></button>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))] lg:px-8">
+  <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
+    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
       <!--v-if-->
     </div>
-    <p class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></p>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
+    <p data-slot="trigger" class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></p>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
       <!--v-if-->
       <ul class="min-w-0">
-        <li class="min-w-0"><a href="#installation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary"><span class="truncate">Installation</span></a>
+        <li class="min-w-0"><a href="#installation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary"><span data-slot="linkText" class="truncate">Installation</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#components" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Components</span></a>
+        <li class="min-w-0"><a href="#components" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Components</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#typography" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Typography</span></a>
+        <li class="min-w-0"><a href="#typography" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Typography</span></a>
           <!--v-if-->
         </li>
-        <li class=""><a href="#utils" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Utils</span></a>
+        <li class=""><a href="#utils" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Utils</span></a>
           <ul class="ms-3">
-            <li class="min-w-0"><a href="#mapcontentnavigation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">mapContentNavigation</span></a>
+            <li class="min-w-0"><a href="#mapcontentnavigation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">mapContentNavigation</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpageheadline" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageHeadline</span></a>
+            <li class="min-w-0"><a href="#findpageheadline" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageHeadline</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpagebreadcrumb" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageBreadcrumb</span></a>
+            <li class="min-w-0"><a href="#findpagebreadcrumb" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageBreadcrumb</span></a>
               <!--v-if-->
             </li>
           </ul>
@@ -125,14 +125,14 @@ exports[`ContentToc > renders with class correctly 1`] = `
 
 exports[`ContentToc > renders with content slot correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
-  <div class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
-    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></button>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+  <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
+    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
       <!--v-if-->
     </div>
-    <p class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></p>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
+    <p data-slot="trigger" class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></p>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
       <!--v-if-->Content slot
     </div>
     <!--v-if-->
@@ -142,34 +142,34 @@ exports[`ContentToc > renders with content slot correctly 1`] = `
 
 exports[`ContentToc > renders with default slot correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
-  <div class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
-    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span class="truncate">Default slot</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></button>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+  <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
+    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span data-slot="title" class="truncate">Default slot</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
       <!--v-if-->
     </div>
-    <p class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span class="truncate">Default slot</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></p>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
+    <p data-slot="trigger" class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span data-slot="title" class="truncate">Default slot</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></p>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
       <!--v-if-->
       <ul class="min-w-0">
-        <li class="min-w-0"><a href="#installation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary"><span class="truncate">Installation</span></a>
+        <li class="min-w-0"><a href="#installation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary"><span data-slot="linkText" class="truncate">Installation</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#components" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Components</span></a>
+        <li class="min-w-0"><a href="#components" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Components</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#typography" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Typography</span></a>
+        <li class="min-w-0"><a href="#typography" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Typography</span></a>
           <!--v-if-->
         </li>
-        <li class=""><a href="#utils" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Utils</span></a>
+        <li class=""><a href="#utils" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Utils</span></a>
           <ul class="ms-3">
-            <li class="min-w-0"><a href="#mapcontentnavigation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">mapContentNavigation</span></a>
+            <li class="min-w-0"><a href="#mapcontentnavigation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">mapContentNavigation</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpageheadline" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageHeadline</span></a>
+            <li class="min-w-0"><a href="#findpageheadline" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageHeadline</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpagebreadcrumb" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageBreadcrumb</span></a>
+            <li class="min-w-0"><a href="#findpagebreadcrumb" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageBreadcrumb</span></a>
               <!--v-if-->
             </li>
           </ul>
@@ -183,34 +183,34 @@ exports[`ContentToc > renders with default slot correctly 1`] = `
 
 exports[`ContentToc > renders with gray highlightColor correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
-  <div class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
-    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></button>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+  <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
+    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
       <!--v-if-->
     </div>
-    <p class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></p>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
+    <p data-slot="trigger" class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></p>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
       <!--v-if-->
       <ul class="min-w-0">
-        <li class="min-w-0"><a href="#installation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary"><span class="truncate">Installation</span></a>
+        <li class="min-w-0"><a href="#installation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary"><span data-slot="linkText" class="truncate">Installation</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#components" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Components</span></a>
+        <li class="min-w-0"><a href="#components" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Components</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#typography" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Typography</span></a>
+        <li class="min-w-0"><a href="#typography" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Typography</span></a>
           <!--v-if-->
         </li>
-        <li class=""><a href="#utils" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Utils</span></a>
+        <li class=""><a href="#utils" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Utils</span></a>
           <ul class="ms-3">
-            <li class="min-w-0"><a href="#mapcontentnavigation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">mapContentNavigation</span></a>
+            <li class="min-w-0"><a href="#mapcontentnavigation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">mapContentNavigation</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpageheadline" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageHeadline</span></a>
+            <li class="min-w-0"><a href="#findpageheadline" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageHeadline</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpagebreadcrumb" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageBreadcrumb</span></a>
+            <li class="min-w-0"><a href="#findpagebreadcrumb" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageBreadcrumb</span></a>
               <!--v-if-->
             </li>
           </ul>
@@ -224,34 +224,34 @@ exports[`ContentToc > renders with gray highlightColor correctly 1`] = `
 
 exports[`ContentToc > renders with highlight correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
-  <div class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
-    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></button>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+  <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
+    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
       <!--v-if-->
     </div>
-    <p class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></p>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
-      <div class="absolute ms-2.5 transition-[translate,height] duration-200 h-(--indicator-size) translate-y-(--indicator-position) w-px rounded-full bg-primary"></div>
+    <p data-slot="trigger" class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></p>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
+      <div data-slot="indicator" class="absolute ms-2.5 transition-[translate,height] duration-200 h-(--indicator-size) translate-y-(--indicator-position) w-px rounded-full bg-primary"></div>
       <ul class="min-w-0 ms-2.5 ps-4 border-s border-default">
-        <li class="min-w-0 -ms-px"><a href="#installation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary"><span class="truncate">Installation</span></a>
+        <li class="min-w-0 -ms-px"><a href="#installation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary"><span data-slot="linkText" class="truncate">Installation</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0 -ms-px"><a href="#components" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Components</span></a>
+        <li class="min-w-0 -ms-px"><a href="#components" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Components</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0 -ms-px"><a href="#typography" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Typography</span></a>
+        <li class="min-w-0 -ms-px"><a href="#typography" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Typography</span></a>
           <!--v-if-->
         </li>
-        <li class=""><a href="#utils" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Utils</span></a>
+        <li class=""><a href="#utils" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Utils</span></a>
           <ul class="ms-3">
-            <li class="min-w-0 -ms-px"><a href="#mapcontentnavigation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">mapContentNavigation</span></a>
+            <li class="min-w-0 -ms-px"><a href="#mapcontentnavigation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">mapContentNavigation</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0 -ms-px"><a href="#findpageheadline" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageHeadline</span></a>
+            <li class="min-w-0 -ms-px"><a href="#findpageheadline" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageHeadline</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0 -ms-px"><a href="#findpagebreadcrumb" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageBreadcrumb</span></a>
+            <li class="min-w-0 -ms-px"><a href="#findpagebreadcrumb" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageBreadcrumb</span></a>
               <!--v-if-->
             </li>
           </ul>
@@ -265,34 +265,34 @@ exports[`ContentToc > renders with highlight correctly 1`] = `
 
 exports[`ContentToc > renders with leading slot correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
-  <div class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
-    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden">Leading slot<span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></button>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+  <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
+    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden">Leading slot<span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
       <!--v-if-->
     </div>
-    <p class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex">Leading slot<span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></p>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
+    <p data-slot="trigger" class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex">Leading slot<span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></p>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
       <!--v-if-->
       <ul class="min-w-0">
-        <li class="min-w-0"><a href="#installation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary"><span class="truncate">Installation</span></a>
+        <li class="min-w-0"><a href="#installation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary"><span data-slot="linkText" class="truncate">Installation</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#components" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Components</span></a>
+        <li class="min-w-0"><a href="#components" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Components</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#typography" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Typography</span></a>
+        <li class="min-w-0"><a href="#typography" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Typography</span></a>
           <!--v-if-->
         </li>
-        <li class=""><a href="#utils" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Utils</span></a>
+        <li class=""><a href="#utils" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Utils</span></a>
           <ul class="ms-3">
-            <li class="min-w-0"><a href="#mapcontentnavigation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">mapContentNavigation</span></a>
+            <li class="min-w-0"><a href="#mapcontentnavigation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">mapContentNavigation</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpageheadline" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageHeadline</span></a>
+            <li class="min-w-0"><a href="#findpageheadline" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageHeadline</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpagebreadcrumb" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageBreadcrumb</span></a>
+            <li class="min-w-0"><a href="#findpagebreadcrumb" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageBreadcrumb</span></a>
               <!--v-if-->
             </li>
           </ul>
@@ -306,34 +306,34 @@ exports[`ContentToc > renders with leading slot correctly 1`] = `
 
 exports[`ContentToc > renders with link slot correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
-  <div class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
-    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></button>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+  <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
+    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
       <!--v-if-->
     </div>
-    <p class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></p>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
+    <p data-slot="trigger" class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></p>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
       <!--v-if-->
       <ul class="min-w-0">
-        <li class="min-w-0"><a href="#installation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary">Link slot</a>
+        <li class="min-w-0"><a href="#installation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary">Link slot</a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#components" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors">Link slot</a>
+        <li class="min-w-0"><a href="#components" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors">Link slot</a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#typography" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors">Link slot</a>
+        <li class="min-w-0"><a href="#typography" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors">Link slot</a>
           <!--v-if-->
         </li>
-        <li class=""><a href="#utils" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors">Link slot</a>
+        <li class=""><a href="#utils" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors">Link slot</a>
           <ul class="ms-3">
-            <li class="min-w-0"><a href="#mapcontentnavigation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors">Link slot</a>
+            <li class="min-w-0"><a href="#mapcontentnavigation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors">Link slot</a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpageheadline" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors">Link slot</a>
+            <li class="min-w-0"><a href="#findpageheadline" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors">Link slot</a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpagebreadcrumb" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors">Link slot</a>
+            <li class="min-w-0"><a href="#findpagebreadcrumb" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors">Link slot</a>
               <!--v-if-->
             </li>
           </ul>
@@ -347,34 +347,34 @@ exports[`ContentToc > renders with link slot correctly 1`] = `
 
 exports[`ContentToc > renders with links correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
-  <div class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
-    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></button>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+  <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
+    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
       <!--v-if-->
     </div>
-    <p class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></p>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
+    <p data-slot="trigger" class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></p>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
       <!--v-if-->
       <ul class="min-w-0">
-        <li class="min-w-0"><a href="#installation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary"><span class="truncate">Installation</span></a>
+        <li class="min-w-0"><a href="#installation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary"><span data-slot="linkText" class="truncate">Installation</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#components" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Components</span></a>
+        <li class="min-w-0"><a href="#components" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Components</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#typography" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Typography</span></a>
+        <li class="min-w-0"><a href="#typography" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Typography</span></a>
           <!--v-if-->
         </li>
-        <li class=""><a href="#utils" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Utils</span></a>
+        <li class=""><a href="#utils" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Utils</span></a>
           <ul class="ms-3">
-            <li class="min-w-0"><a href="#mapcontentnavigation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">mapContentNavigation</span></a>
+            <li class="min-w-0"><a href="#mapcontentnavigation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">mapContentNavigation</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpageheadline" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageHeadline</span></a>
+            <li class="min-w-0"><a href="#findpageheadline" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageHeadline</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpagebreadcrumb" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageBreadcrumb</span></a>
+            <li class="min-w-0"><a href="#findpagebreadcrumb" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageBreadcrumb</span></a>
               <!--v-if-->
             </li>
           </ul>
@@ -388,34 +388,34 @@ exports[`ContentToc > renders with links correctly 1`] = `
 
 exports[`ContentToc > renders with neutral color correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
-  <div class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
-    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></button>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+  <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
+    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
       <!--v-if-->
     </div>
-    <p class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></p>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
+    <p data-slot="trigger" class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></p>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
       <!--v-if-->
       <ul class="min-w-0">
-        <li class="min-w-0"><a href="#installation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-highlighted"><span class="truncate">Installation</span></a>
+        <li class="min-w-0"><a href="#installation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-highlighted"><span data-slot="linkText" class="truncate">Installation</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#components" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Components</span></a>
+        <li class="min-w-0"><a href="#components" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Components</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#typography" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Typography</span></a>
+        <li class="min-w-0"><a href="#typography" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Typography</span></a>
           <!--v-if-->
         </li>
-        <li class=""><a href="#utils" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Utils</span></a>
+        <li class=""><a href="#utils" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Utils</span></a>
           <ul class="ms-3">
-            <li class="min-w-0"><a href="#mapcontentnavigation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">mapContentNavigation</span></a>
+            <li class="min-w-0"><a href="#mapcontentnavigation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">mapContentNavigation</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpageheadline" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageHeadline</span></a>
+            <li class="min-w-0"><a href="#findpageheadline" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageHeadline</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpagebreadcrumb" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageBreadcrumb</span></a>
+            <li class="min-w-0"><a href="#findpagebreadcrumb" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageBreadcrumb</span></a>
               <!--v-if-->
             </li>
           </ul>
@@ -429,34 +429,34 @@ exports[`ContentToc > renders with neutral color correctly 1`] = `
 
 exports[`ContentToc > renders with title correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
-  <div class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
-    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></button>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+  <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
+    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
       <!--v-if-->
     </div>
-    <p class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></p>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
+    <p data-slot="trigger" class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></p>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
       <!--v-if-->
       <ul class="min-w-0">
-        <li class="min-w-0"><a href="#installation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary"><span class="truncate">Installation</span></a>
+        <li class="min-w-0"><a href="#installation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary"><span data-slot="linkText" class="truncate">Installation</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#components" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Components</span></a>
+        <li class="min-w-0"><a href="#components" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Components</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#typography" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Typography</span></a>
+        <li class="min-w-0"><a href="#typography" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Typography</span></a>
           <!--v-if-->
         </li>
-        <li class=""><a href="#utils" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Utils</span></a>
+        <li class=""><a href="#utils" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Utils</span></a>
           <ul class="ms-3">
-            <li class="min-w-0"><a href="#mapcontentnavigation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">mapContentNavigation</span></a>
+            <li class="min-w-0"><a href="#mapcontentnavigation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">mapContentNavigation</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpageheadline" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageHeadline</span></a>
+            <li class="min-w-0"><a href="#findpageheadline" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageHeadline</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpagebreadcrumb" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageBreadcrumb</span></a>
+            <li class="min-w-0"><a href="#findpagebreadcrumb" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageBreadcrumb</span></a>
               <!--v-if-->
             </li>
           </ul>
@@ -470,34 +470,34 @@ exports[`ContentToc > renders with title correctly 1`] = `
 
 exports[`ContentToc > renders with top slot correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
-  <div class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
-    <div class="">Top slot</div><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></button>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+  <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
+    <div data-slot="top" class="">Top slot</div><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
       <!--v-if-->
     </div>
-    <p class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></p>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
+    <p data-slot="trigger" class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></p>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
       <!--v-if-->
       <ul class="min-w-0">
-        <li class="min-w-0"><a href="#installation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary"><span class="truncate">Installation</span></a>
+        <li class="min-w-0"><a href="#installation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary"><span data-slot="linkText" class="truncate">Installation</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#components" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Components</span></a>
+        <li class="min-w-0"><a href="#components" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Components</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#typography" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Typography</span></a>
+        <li class="min-w-0"><a href="#typography" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Typography</span></a>
           <!--v-if-->
         </li>
-        <li class=""><a href="#utils" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Utils</span></a>
+        <li class=""><a href="#utils" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Utils</span></a>
           <ul class="ms-3">
-            <li class="min-w-0"><a href="#mapcontentnavigation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">mapContentNavigation</span></a>
+            <li class="min-w-0"><a href="#mapcontentnavigation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">mapContentNavigation</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpageheadline" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageHeadline</span></a>
+            <li class="min-w-0"><a href="#findpageheadline" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageHeadline</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpagebreadcrumb" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageBreadcrumb</span></a>
+            <li class="min-w-0"><a href="#findpagebreadcrumb" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageBreadcrumb</span></a>
               <!--v-if-->
             </li>
           </ul>
@@ -511,34 +511,34 @@ exports[`ContentToc > renders with top slot correctly 1`] = `
 
 exports[`ContentToc > renders with trailing slot correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
-  <div class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
-    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center">Trailing slot</span></button>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+  <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
+    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center">Trailing slot</span></button>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
       <!--v-if-->
     </div>
-    <p class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center">Trailing slot</span></p>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
+    <p data-slot="trigger" class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center">Trailing slot</span></p>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
       <!--v-if-->
       <ul class="min-w-0">
-        <li class="min-w-0"><a href="#installation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary"><span class="truncate">Installation</span></a>
+        <li class="min-w-0"><a href="#installation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary"><span data-slot="linkText" class="truncate">Installation</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#components" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Components</span></a>
+        <li class="min-w-0"><a href="#components" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Components</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#typography" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Typography</span></a>
+        <li class="min-w-0"><a href="#typography" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Typography</span></a>
           <!--v-if-->
         </li>
-        <li class=""><a href="#utils" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Utils</span></a>
+        <li class=""><a href="#utils" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Utils</span></a>
           <ul class="ms-3">
-            <li class="min-w-0"><a href="#mapcontentnavigation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">mapContentNavigation</span></a>
+            <li class="min-w-0"><a href="#mapcontentnavigation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">mapContentNavigation</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpageheadline" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageHeadline</span></a>
+            <li class="min-w-0"><a href="#findpageheadline" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageHeadline</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpagebreadcrumb" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageBreadcrumb</span></a>
+            <li class="min-w-0"><a href="#findpagebreadcrumb" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageBreadcrumb</span></a>
               <!--v-if-->
             </li>
           </ul>
@@ -552,34 +552,34 @@ exports[`ContentToc > renders with trailing slot correctly 1`] = `
 
 exports[`ContentToc > renders with trailingIcon correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
-  <div class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
-    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:plus size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></button>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+  <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
+    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:plus size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
       <!--v-if-->
     </div>
-    <p class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:plus size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true"></span></span></p>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
+    <p data-slot="trigger" class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:plus size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></p>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
       <!--v-if-->
       <ul class="min-w-0">
-        <li class="min-w-0"><a href="#installation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary"><span class="truncate">Installation</span></a>
+        <li class="min-w-0"><a href="#installation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary"><span data-slot="linkText" class="truncate">Installation</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#components" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Components</span></a>
+        <li class="min-w-0"><a href="#components" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Components</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#typography" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Typography</span></a>
+        <li class="min-w-0"><a href="#typography" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Typography</span></a>
           <!--v-if-->
         </li>
-        <li class=""><a href="#utils" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Utils</span></a>
+        <li class=""><a href="#utils" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Utils</span></a>
           <ul class="ms-3">
-            <li class="min-w-0"><a href="#mapcontentnavigation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">mapContentNavigation</span></a>
+            <li class="min-w-0"><a href="#mapcontentnavigation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">mapContentNavigation</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpageheadline" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageHeadline</span></a>
+            <li class="min-w-0"><a href="#findpageheadline" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageHeadline</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpagebreadcrumb" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageBreadcrumb</span></a>
+            <li class="min-w-0"><a href="#findpagebreadcrumb" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageBreadcrumb</span></a>
               <!--v-if-->
             </li>
           </ul>
@@ -593,34 +593,34 @@ exports[`ContentToc > renders with trailingIcon correctly 1`] = `
 
 exports[`ContentToc > renders with ui correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
-  <div class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
-    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden size-6" aria-hidden="true"></span></span></button>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+  <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col">
+    <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden size-6" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
       <!--v-if-->
     </div>
-    <p class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span class="truncate">On this page</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden size-6" aria-hidden="true"></span></span></p>
-    <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
+    <p data-slot="trigger" class="group text-sm font-semibold flex-1 items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary hidden lg:flex"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden size-6" aria-hidden="true" data-slot="trailingIcon"></span></span></p>
+    <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none hidden lg:flex">
       <!--v-if-->
       <ul class="min-w-0">
-        <li class="min-w-0"><a href="#installation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary"><span class="truncate">Installation</span></a>
+        <li class="min-w-0"><a href="#installation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-primary"><span data-slot="linkText" class="truncate">Installation</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#components" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Components</span></a>
+        <li class="min-w-0"><a href="#components" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Components</span></a>
           <!--v-if-->
         </li>
-        <li class="min-w-0"><a href="#typography" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Typography</span></a>
+        <li class="min-w-0"><a href="#typography" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Typography</span></a>
           <!--v-if-->
         </li>
-        <li class=""><a href="#utils" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">Utils</span></a>
+        <li class=""><a href="#utils" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">Utils</span></a>
           <ul class="ms-3">
-            <li class="min-w-0"><a href="#mapcontentnavigation" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">mapContentNavigation</span></a>
+            <li class="min-w-0"><a href="#mapcontentnavigation" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">mapContentNavigation</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpageheadline" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageHeadline</span></a>
+            <li class="min-w-0"><a href="#findpageheadline" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageHeadline</span></a>
               <!--v-if-->
             </li>
-            <li class="min-w-0"><a href="#findpagebreadcrumb" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span class="truncate">findPageBreadcrumb</span></a>
+            <li class="min-w-0"><a href="#findpagebreadcrumb" data-slot="link" class="group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors"><span data-slot="linkText" class="truncate">findPageBreadcrumb</span></a>
               <!--v-if-->
             </li>
           </ul>